任务明细页面

components/date-time-picker/README.md

@@ -0,0 +1,67 @@
+---
+title: DateTimePicker 时间选择器
+description: 用于选择一个时间点或者一个时间段。
+spline: form
+isComponent: true
+---
+
+<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-94%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-98%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-94%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-86%25-blue" /></span>
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+  "t-date-time-picker": "tdesign-miniprogram/date-time-picker/date-time-picker"
+}
+```
+
+## 代码演示
+
+### 基础时间选择器
+
+<img src="https://tdesign.gtimg.com/miniprogram/readme/datetimepicker.png" width="375px" height="50%">
+
+#### 选择日期(年月日)
+
+{{ year-month-date }}
+
+#### 选择日期(年月)
+
+{{ year-month }}
+
+#### 选择时间(时分)
+
+{{ time-min }}
+
+#### 选择日期时间(年月日时分)
+
+{{ date-all }}
+
+## API
+### DateTimePicker Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+cancel-btn | String | 取消 | 取消按钮文字 | N
+confirm-btn | String | - | 确定按钮文字 | N
+end | String / Number | - | 选择器的结束时间 | N
+external-classes | Array | - | 组件类名，分别用于设置组件外层元素、确认按钮、取消按钮、标题等元素类名。`['t-class', 't-class-confirm', 't-class-cancel', 't-class-title']` | N
+footer | Slot | true | 底部内容 | N
+format | String | '' | 用于格式化日期，[详细文档](https://day.js.org/docs/en/display/format) | N
+header | Boolean / Slot | true | 头部内容。值为 true 显示空白头部，值为 false 不显示任何内容，值类型为 TNode 表示自定义头部内容 | N
+mode | String / Array | 'date' | year = 年；month = 年月；date = 年月日；hour = 年月日时； minute = 年月日时分；当类型为数组时，第一个值控制年月日，第二个值控制时分秒。TS 类型：`DateTimePickerMode` `type DateTimePickerMode = TimeModeValues | Array<TimeModeValues> ` `type TimeModeValues = 'year' | 'month' | 'date' | 'hour' | 'minute' | 'second'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/date-time-picker/type.ts) | N
+show-week | Boolean | false | 【开发中】是否在日期旁边显示周几（如周一，周二，周日等） | N
+start | String / Number | - | 选择器的开始时间 | N
+title | String | - | 标题 | N
+value | String / Number | - | 选中值。TS 类型：`DateValue` `type DateValue = string | number`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/date-time-picker/type.ts) | N
+default-value | String / Number | undefined | 选中值。非受控属性。TS 类型：`DateValue` `type DateValue = string | number`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/date-time-picker/type.ts) | N
+visible | Boolean | false | 是否显示 | N
+
+### DateTimePicker Events
+
+名称 | 参数 | 描述
+-- | -- | --
+cancel | \- | 取消按钮点击时触发
+change | `(value: DateValue)` | 确认按钮点击时触发
+pick | `(value: DateValue)` | 选中值发生变化时触发

components/date-time-picker/date-time-picker.d.ts

@@ -0,0 +1,107 @@
+import dayjs from 'dayjs';
+import type { Dayjs } from 'dayjs';
+import { SuperComponent } from '../common/src/index';
+declare enum ModeItem {
+    YEAR = "year",
+    MONTH = "month",
+    DATE = "date",
+    HOUR = "hour",
+    MINUTE = "minute"
+}
+interface ColumnItemValue {
+    value: string | number;
+    label: string | number;
+}
+export default class DateTimePicker extends SuperComponent {
+    properties: import("./type").TdDateTimePickerProps;
+    externalClasses: string[];
+    options: {
+        multipleSlots: boolean;
+    };
+    observers: {
+        'start, end, value': () => void;
+        mode(m: any): void;
+    };
+    date: any;
+    data: {
+        prefix: string;
+        classPrefix: string;
+        columns: any[];
+        columnsValue: any[];
+        fullModes: any[];
+        locale: {
+            year: string;
+            month: string;
+            day: string;
+            hour: string;
+            minute: string;
+            am: string;
+            pm: string;
+            confirm: string;
+            cancel: string;
+        };
+    };
+    controlledProps: {
+        key: string;
+        event: string;
+    }[];
+    methods: {
+        updateColumns(): void;
+        getParseDate(): Dayjs;
+        getMinDate(): Dayjs;
+        getMaxDate(): Dayjs;
+        getMinYear(): number;
+        getMaxYear(): number;
+        getMinMonth(): number;
+        getMaxMonth(): number;
+        getMinDay(): number;
+        getMaxDay(): number;
+        getMinHour(): number;
+        getMaxHour(): number;
+        getMinMinute(): number;
+        getMaxMinute(): number;
+        getDate(): Dayjs;
+        clipDate(date: Dayjs): Dayjs;
+        setYear(date: Dayjs, year: number): Dayjs;
+        setMonth(date: Dayjs, month: number): Dayjs;
+        getColumnOptions(): any[];
+        getCommonDateParams(): {
+            date: dayjs.Dayjs;
+            selYear: number;
+            selMonth: number;
+            selDate: number;
+            selHour: number;
+            minDateYear: any;
+            maxDateYear: any;
+            minDateMonth: any;
+            maxDateMonth: any;
+            minDateDay: any;
+            maxDateDay: any;
+            minDateHour: any;
+            maxDateHour: any;
+            minDateMinute: any;
+            maxDateMinute: any;
+        };
+        getOptionByType(type: any, dateParams: any): any;
+        getYearOptions(dateParams: any): ColumnItemValue[];
+        getMonthOptions(dateParams: any): ColumnItemValue[];
+        getDayOptions(dateParams: any): ColumnItemValue[];
+        getHourOptions(dateParams: any): ColumnItemValue[];
+        getMinuteOptions(dateParams: any): ColumnItemValue[];
+        getValueCols(this: DateTimePicker): {
+            columns: any;
+            columnsValue: any;
+        };
+        getColumnsValue(): string[];
+        getNewDate(value: number, type: ModeItem): Dayjs;
+        onColumnChange(e: WechatMiniprogram.CustomEvent): void;
+        onConfirm(): void;
+        onCancel(): void;
+        onVisibleChange(e: any): void;
+        resetColumns(): void;
+    };
+    getFullModeArray(mode: any): any;
+    getFullModeByModeString(modeString: any, matchModes: any): any;
+    isTimeMode(): boolean;
+}
+export {};

components/date-time-picker/date-time-picker.js

@@ -0,0 +1,405 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import dayjs from './dayjs/index';
+import config from '../common/config';
+import { SuperComponent, wxComponent } from '../common/src/index';
+import defaultLocale from './locale/zh';
+import props from './props';
+const { prefix } = config;
+const name = `${prefix}-date-time-picker`;
+var ModeItem;
+(function (ModeItem) {
+    ModeItem["YEAR"] = "year";
+    ModeItem["MONTH"] = "month";
+    ModeItem["DATE"] = "date";
+    ModeItem["HOUR"] = "hour";
+    ModeItem["MINUTE"] = "minute";
+})(ModeItem || (ModeItem = {}));
+const DATE_MODES = ['year', 'month', 'date'];
+const TIME_MODES = ['hour', 'minute'];
+const FULL_MODES = [...DATE_MODES, ...TIME_MODES];
+const DEFAULT_MIN_DATE = dayjs('2000-01-01 00:00:00');
+const DEFAULT_MAX_DATE = dayjs('2030-12-31 23:59:59');
+let DateTimePicker = class DateTimePicker extends SuperComponent {
+    constructor() {
+        super(...arguments);
+        this.properties = props;
+        this.externalClasses = [`${prefix}-class`, `${prefix}-class-confirm`, `${prefix}-class-cancel`, `${prefix}-class-title`];
+        this.options = {
+            multipleSlots: true,
+        };
+        this.observers = {
+            'start, end, value': function () {
+                this.updateColumns();
+            },
+            mode(m) {
+                const fullModes = this.getFullModeArray(m);
+                this.setData({
+                    fullModes,
+                });
+                this.updateColumns();
+            },
+        };
+        this.date = null;
+        this.data = {
+            prefix,
+            classPrefix: name,
+            columns: [],
+            columnsValue: [],
+            fullModes: [],
+            locale: defaultLocale,
+        };
+        this.controlledProps = [
+            {
+                key: 'value',
+                event: 'change',
+            },
+        ];
+        this.methods = {
+            updateColumns() {
+                this.date = this.getParseDate();
+                const { columns, columnsValue } = this.getValueCols();
+                this.setData({
+                    columns,
+                    columnsValue,
+                });
+            },
+            getParseDate() {
+                const { value, defaultValue } = this.properties;
+                const minDate = this.getMinDate();
+                const isTimeMode = this.isTimeMode();
+                let currentValue = value || defaultValue;
+                if (isTimeMode) {
+                    const dateStr = dayjs(minDate).format('YYYY-MM-DD');
+                    currentValue = dayjs(`${dateStr} ${currentValue}`);
+                }
+                const parseDate = dayjs(currentValue || minDate);
+                const isDateValid = parseDate.isValid();
+                return isDateValid ? parseDate : minDate;
+            },
+            getMinDate() {
+                const { start } = this.properties;
+                return start ? dayjs(start) : DEFAULT_MIN_DATE;
+            },
+            getMaxDate() {
+                const { end } = this.properties;
+                return end ? dayjs(end) : DEFAULT_MAX_DATE;
+            },
+            getMinYear() {
+                return this.getMinDate().year();
+            },
+            getMaxYear() {
+                return this.getMaxDate().year();
+            },
+            getMinMonth() {
+                return this.getMinDate().month();
+            },
+            getMaxMonth() {
+                return this.getMaxDate().month();
+            },
+            getMinDay() {
+                return this.getMinDate().date();
+            },
+            getMaxDay() {
+                return this.getMaxDate().date();
+            },
+            getMinHour() {
+                return this.getMinDate().hour();
+            },
+            getMaxHour() {
+                return this.getMaxDate().hour();
+            },
+            getMinMinute() {
+                return this.getMinDate().minute();
+            },
+            getMaxMinute() {
+                return this.getMaxDate().minute();
+            },
+            getDate() {
+                return this.clipDate((this === null || this === void 0 ? void 0 : this.date) || DEFAULT_MIN_DATE);
+            },
+            clipDate(date) {
+                const minDate = this.getMinDate();
+                const maxDate = this.getMaxDate();
+                return dayjs(Math.min(Math.max(minDate.valueOf(), date.valueOf()), maxDate.valueOf()));
+            },
+            setYear(date, year) {
+                const beforeMonthDays = date.date();
+                const afterMonthDays = date.year(year).daysInMonth();
+                const tempDate = date.date(Math.min(beforeMonthDays.valueOf(), afterMonthDays.valueOf()));
+                return tempDate.year(year);
+            },
+            setMonth(date, month) {
+                const beforeMonthDays = date.date();
+                const afterMonthDays = date.month(month).daysInMonth();
+                const tempDate = date.date(Math.min(beforeMonthDays.valueOf(), afterMonthDays.valueOf()));
+                return tempDate.month(month);
+            },
+            getColumnOptions() {
+                const { fullModes } = this.data;
+                const dateParams = this.getCommonDateParams();
+                const columnOptions = [];
+                fullModes === null || fullModes === void 0 ? void 0 : fullModes.forEach((mode) => {
+                    const columnOption = this.getOptionByType(mode, dateParams);
+                    columnOptions.push(columnOption);
+                });
+                return columnOptions;
+            },
+            getCommonDateParams() {
+                const date = this.getDate();
+                const selYear = date.year();
+                const selMonth = date.month();
+                const selDate = date.date();
+                const selHour = date.hour();
+                const minDateYear = this.getMinYear();
+                const maxDateYear = this.getMaxYear();
+                const minDateMonth = this.getMinMonth();
+                const maxDateMonth = this.getMaxMonth();
+                const minDateDay = this.getMinDay();
+                const maxDateDay = this.getMaxDay();
+                const minDateHour = this.getMinHour();
+                const maxDateHour = this.getMaxHour();
+                const minDateMinute = this.getMinMinute();
+                const maxDateMinute = this.getMaxMinute();
+                return {
+                    date,
+                    selYear,
+                    selMonth,
+                    selDate,
+                    selHour,
+                    minDateYear,
+                    maxDateYear,
+                    minDateMonth,
+                    maxDateMonth,
+                    minDateDay,
+                    maxDateDay,
+                    minDateHour,
+                    maxDateHour,
+                    minDateMinute,
+                    maxDateMinute,
+                };
+            },
+            getOptionByType(type, dateParams) {
+                switch (type) {
+                    case ModeItem.YEAR:
+                        return this.getYearOptions(dateParams);
+                    case ModeItem.MONTH:
+                        return this.getMonthOptions(dateParams);
+                    case ModeItem.DATE:
+                        return this.getDayOptions(dateParams);
+                    case ModeItem.HOUR:
+                        return this.getHourOptions(dateParams);
+                    case ModeItem.MINUTE:
+                        return this.getMinuteOptions(dateParams);
+                    default:
+                        break;
+                }
+            },
+            getYearOptions(dateParams) {
+                const { locale } = this.data;
+                const { minDateYear, maxDateYear } = dateParams;
+                const years = [];
+                for (let i = minDateYear; i <= maxDateYear; i += 1) {
+                    years.push({
+                        value: `${i}`,
+                        label: `${i + locale.year}`,
+                    });
+                }
+                return years;
+            },
+            getMonthOptions(dateParams) {
+                const { locale } = this.data;
+                const { minDateYear, maxDateYear, selYear, minDateMonth, maxDateMonth } = dateParams;
+                const months = [];
+                let minMonth = 0;
+                let maxMonth = 11;
+                if (minDateYear === selYear) {
+                    minMonth = minDateMonth;
+                }
+                if (maxDateYear === selYear) {
+                    maxMonth = maxDateMonth;
+                }
+                for (let i = minMonth; i <= maxMonth; i += 1) {
+                    months.push({
+                        value: `${i}`,
+                        label: `${i + 1 + locale.month}`,
+                    });
+                }
+                return months;
+            },
+            getDayOptions(dateParams) {
+                const { locale } = this.data;
+                const { minDateYear, maxDateYear, minDateMonth, maxDateMonth, minDateDay, maxDateDay, selYear, selMonth, date } = dateParams;
+                const days = [];
+                let minDay = 1;
+                let maxDay = date.daysInMonth();
+                if (minDateYear === selYear && minDateMonth === selMonth) {
+                    minDay = minDateDay;
+                }
+                if (maxDateYear === selYear && maxDateMonth === selMonth) {
+                    maxDay = maxDateDay;
+                }
+                for (let i = minDay; i <= maxDay; i += 1) {
+                    days.push({
+                        value: `${i}`,
+                        label: `${i + locale.day}`,
+                    });
+                }
+                return days;
+            },
+            getHourOptions(dateParams) {
+                const { locale } = this.data;
+                const { minDateYear, maxDateYear, minDateMonth, maxDateMonth, minDateDay, minDateHour, maxDateDay, maxDateHour, selYear, selMonth, selDate, } = dateParams;
+                const hours = [];
+                let minHour = 0;
+                let maxHour = 23;
+                if (minDateYear === selYear && minDateMonth === selMonth && minDateDay === selDate) {
+                    minHour = minDateHour;
+                }
+                if (maxDateYear === selYear && maxDateMonth === selMonth && maxDateDay === selDate) {
+                    maxHour = maxDateHour;
+                }
+                for (let i = minHour; i <= maxHour; i += 1) {
+                    hours.push({
+                        value: `${i}`,
+                        label: `${i + locale.hour}`,
+                    });
+                }
+                return hours;
+            },
+            getMinuteOptions(dateParams) {
+                const { locale } = this.data;
+                const { minDateYear, maxDateYear, minDateMonth, maxDateMonth, minDateDay, maxDateDay, minDateHour, maxDateHour, minDateMinute, maxDateMinute, selYear, selMonth, selDate, selHour, } = dateParams;
+                const minutes = [];
+                let minMinute = 0;
+                let maxMinute = 59;
+                if (minDateYear === selYear && minDateMonth === selMonth && minDateDay === selDate && minDateHour === selHour) {
+                    minMinute = minDateMinute;
+                }
+                if (maxDateYear === selYear && maxDateMonth === selMonth && maxDateDay === selDate && maxDateHour === selHour) {
+                    maxMinute = maxDateMinute;
+                }
+                for (let i = minMinute; i <= maxMinute; i += 1) {
+                    minutes.push({
+                        value: `${i}`,
+                        label: `${i + locale.minute}`,
+                    });
+                }
+                return minutes;
+            },
+            getValueCols() {
+                return {
+                    columns: this.getColumnOptions(),
+                    columnsValue: this.getColumnsValue(),
+                };
+            },
+            getColumnsValue() {
+                const { fullModes } = this.data;
+                const date = this.getDate();
+                const columnsValue = [];
+                fullModes === null || fullModes === void 0 ? void 0 : fullModes.forEach((mode) => {
+                    columnsValue.push(`${date[mode]()}`);
+                });
+                return columnsValue;
+            },
+            getNewDate(value, type) {
+                let newValue = this.getDate();
+                switch (type) {
+                    case ModeItem.YEAR:
+                        newValue = this.setYear(newValue, value);
+                        break;
+                    case ModeItem.MONTH:
+                        newValue = this.setMonth(newValue, value);
+                        break;
+                    case ModeItem.DATE:
+                        newValue = newValue.date(value);
+                        break;
+                    case ModeItem.HOUR:
+                        newValue = newValue.hour(value);
+                        break;
+                    case ModeItem.MINUTE:
+                        newValue = newValue.minute(value);
+                        break;
+                    default:
+                        break;
+                }
+                return this.clipDate(newValue);
+            },
+            onColumnChange(e) {
+                const { value, column } = e === null || e === void 0 ? void 0 : e.detail;
+                const { fullModes, format } = this.data;
+                const columnValue = value === null || value === void 0 ? void 0 : value[column];
+                const columnType = fullModes === null || fullModes === void 0 ? void 0 : fullModes[column];
+                const newValue = this.getNewDate(parseInt(columnValue, 10), columnType);
+                this.date = newValue;
+                const { columns, columnsValue } = this.getValueCols();
+                this.setData({
+                    columns,
+                    columnsValue,
+                });
+                const date = this.getDate();
+                const pickValue = format ? date.format(format) : date.valueOf();
+                this.triggerEvent('pick', { value: pickValue });
+            },
+            onConfirm() {
+                const { format } = this.properties;
+                const date = this.getDate();
+                const value = format ? date.format(format) : date.valueOf();
+                this._trigger('change', { value });
+                this.resetColumns();
+            },
+            onCancel() {
+                this.resetColumns();
+                this.triggerEvent('cancel');
+            },
+            onVisibleChange(e) {
+                if (!e.detail.visible) {
+                    this.resetColumns();
+                }
+            },
+            resetColumns() {
+                const parseDate = this.getParseDate();
+                this.date = parseDate;
+                const { columns, columnsValue } = this.getValueCols();
+                this.setData({
+                    columns,
+                    columnsValue,
+                });
+            },
+        };
+    }
+    getFullModeArray(mode) {
+        if (typeof mode === 'string' || mode instanceof String) {
+            return this.getFullModeByModeString(mode, FULL_MODES);
+        }
+        if (Array.isArray(mode)) {
+            if ((mode === null || mode === void 0 ? void 0 : mode.length) === 1) {
+                return this.getFullModeByModeString(mode[0], FULL_MODES);
+            }
+            if ((mode === null || mode === void 0 ? void 0 : mode.length) === 2) {
+                const dateModes = this.getFullModeByModeString(mode[0], DATE_MODES);
+                const timeModes = this.getFullModeByModeString(mode[1], TIME_MODES);
+                return [...dateModes, ...timeModes];
+            }
+        }
+    }
+    getFullModeByModeString(modeString, matchModes) {
+        if (!modeString) {
+            return [];
+        }
+        const endIndex = matchModes === null || matchModes === void 0 ? void 0 : matchModes.findIndex((mode) => modeString === mode);
+        return matchModes === null || matchModes === void 0 ? void 0 : matchModes.slice(0, endIndex + 1);
+    }
+    isTimeMode() {
+        const { fullModes } = this.data;
+        return fullModes[0] === ModeItem.HOUR;
+    }
+};
+DateTimePicker = __decorate([
+    wxComponent()
+], DateTimePicker);
+export default DateTimePicker;

components/date-time-picker/date-time-picker.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-picker": "../picker/picker",
+    "t-picker-item": "../picker/picker-item"
+  }
+}

components/date-time-picker/date-time-picker.wxml

@@ -0,0 +1,18 @@
+<t-picker
+  class="{{classPrefix}}"
+  visible="{{visible}}"
+  value="{{columnsValue}}"
+  bind:pick="onColumnChange"
+  bind:change="onConfirm"
+  bind:cancel="onCancel"
+  bind:visible-change="onVisibleChange"
+  header="{{header}}"
+  title="{{title}}"
+  confirmBtn="{{confirmBtn || locale.confirm}}"
+  cancelBtn="{{cancelBtn || locale.cancel}}"
+>
+  <slot slot="header" name="header" />
+
+  <t-picker-item wx:for="{{columns}}" wx:key="index" class="{{classPrefix}}__item" options="{{item}}" index="index" />
+  <slot slot="footer" name="footer" />
+</t-picker>

components/date-time-picker/locale/en.d.ts

@@ -0,0 +1,12 @@
+declare const _default: {
+    year: string;
+    month: string;
+    day: string;
+    hour: string;
+    minute: string;
+    am: string;
+    pm: string;
+    confirm: string;
+    cancel: string;
+};
+export default _default;

components/date-time-picker/locale/en.js

@@ -0,0 +1,11 @@
+export default {
+    year: '',
+    month: '',
+    day: '',
+    hour: '',
+    minute: '',
+    am: 'AM',
+    pm: 'PM',
+    confirm: 'confirm',
+    cancel: 'cancel',
+};

components/date-time-picker/locale/zh.d.ts

@@ -0,0 +1,12 @@
+declare const _default: {
+    year: string;
+    month: string;
+    day: string;
+    hour: string;
+    minute: string;
+    am: string;
+    pm: string;
+    confirm: string;
+    cancel: string;
+};
+export default _default;

components/date-time-picker/locale/zh.js

@@ -0,0 +1,11 @@
+export default {
+    year: '年',
+    month: '月',
+    day: '日',
+    hour: '时',
+    minute: '分',
+    am: '上午',
+    pm: '下午',
+    confirm: '确定',
+    cancel: '取消',
+};

components/date-time-picker/props.d.ts

@@ -0,0 +1,3 @@
+import { TdDateTimePickerProps } from './type';
+declare const props: TdDateTimePickerProps;
+export default props;

components/date-time-picker/props.js

@@ -0,0 +1,51 @@
+const props = {
+    cancelBtn: {
+        type: String,
+        value: '',
+    },
+    confirmBtn: {
+        type: String,
+        value: '',
+    },
+    end: {
+        type: null,
+    },
+    externalClasses: {
+        type: Array,
+    },
+    format: {
+        type: String,
+        value: '',
+    },
+    header: {
+        type: Boolean,
+        value: true,
+    },
+    mode: {
+        type: null,
+        value: 'date',
+    },
+    showWeek: {
+        type: Boolean,
+        value: false,
+    },
+    start: {
+        type: null,
+    },
+    title: {
+        type: String,
+        value: '',
+    },
+    value: {
+        type: null,
+        value: null,
+    },
+    defaultValue: {
+        type: null,
+    },
+    visible: {
+        type: Boolean,
+        value: false,
+    },
+};
+export default props;

components/date-time-picker/type.d.ts

@@ -0,0 +1,57 @@
+export interface TdDateTimePickerProps {
+    cancelBtn?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    confirmBtn?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    end?: {
+        type: StringConstructor;
+        value?: string | number;
+    };
+    externalClasses?: {
+        type: ArrayConstructor;
+        value?: ['t-class', 't-class-confirm', 't-class-cancel', 't-class-title'];
+    };
+    format?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    header?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    mode?: {
+        type: StringConstructor;
+        value?: DateTimePickerMode;
+    };
+    showWeek?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    start?: {
+        type: StringConstructor;
+        value?: string | number;
+    };
+    title?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    value?: {
+        type: StringConstructor;
+        value?: DateValue;
+    };
+    defaultValue?: {
+        type: StringConstructor;
+        value?: DateValue;
+    };
+    visible?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+}
+export declare type DateTimePickerMode = TimeModeValues | Array<TimeModeValues>;
+export declare type TimeModeValues = 'year' | 'month' | 'date' | 'hour' | 'minute' | 'second';
+export declare type DateValue = string | number;

components/date-time-picker/type.js

@@ -0,0 +1 @@
+export {};