@tdesign/uniapp 0.7.2 → 0.8.0

package/dist/date-time-picker/date-time-picker.vue

@@ -6,10 +6,10 @@
       :visible="visible"
       :value="columnsValue"
       :header="header"
-      :title="title"
+      :title="title || globalConfig.title || ''"
       :auto-close="autoClose"
-      :confirm-btn="confirmBtn || locale.confirm"
-      :cancel-btn="cancelBtn || locale.cancel"
+      :confirm-btn="confirmBtn || globalConfig.confirm"
+      :cancel-btn="cancelBtn || globalConfig.cancel"
       :use-popup="usePopup"
       :popup-props="popupProps"
       @pick="onColumnChange"
@@ -29,7 +29,7 @@
       <t-picker-item
         v-for="(item, index) in columns"
         :key="index"
-        :class="tools.cls(classPrefix + '__item', [['roomly', columns.length >= 5 && index == 0]])"
+        :class="[classPrefix + '__item', columns.length >= 5 && index == 0 ? classPrefix + '__item' + '--roomly' : '']"
         :use-slots="false"
         :options="item"
         index="index"
@@ -57,6 +57,7 @@ import tools from '../common/utils.wxs';
 import dayjs from '../npm/dayjs/esm/index.js';
 import localeData from '../npm/dayjs/esm/plugin/localeData';
 
+import usingConfig from '../mixins/using-config';
 /**
  * dayjs LocaleData 插件
  * https://dayjs.fenxianglu.cn/category/plugin.html#localedata
@@ -67,7 +68,8 @@ dayjs.locale('zh-cn');
 const defaultLocale = dayjsLocaleMap[dayjs.locale()]?.key || dayjsLocaleMap.default?.key;
 
 
-const name = `${prefix}-date-time-picker`;
+const componentName = 'date-time-picker';
+const name = `${prefix}-${componentName}`;
 
 const ModeItem = {
   YEAR: 'year',
@@ -82,487 +84,500 @@ const DATE_MODES = ['year', 'month', 'date'];
 const TIME_MODES = ['hour', 'minute', 'second'];
 const FULL_MODES = [...DATE_MODES, ...TIME_MODES];
 
-export default uniComponent({
-  name,
-  options: {
-    styleIsolation: 'shared',
-  },
-  controlledProps: [
-    {
-      key: 'value',
-      event: 'change',
-    },
-  ],
-  externalClasses: [
-    `${prefix}-class`,
-    `${prefix}-class-confirm`,
-    `${prefix}-class-cancel`,
-    `${prefix}-class-title`,
-  ],
+export default {
   components: {
     TPicker,
     TPickerItem,
   },
-  props: {
-    ...props,
-  },
-  emits: [
-    'update:visible',
-  ],
-  data() {
-    return {
-      prefix,
-      classPrefix: name,
-      columns: [],
-      columnsValue: [],
-      fullModes: [],
-      locale: dayjsLocaleMap[defaultLocale].i18n, // 国际化语言包
-      dayjsLocale: dayjsLocaleMap[defaultLocale].key, // dayjs 自适应的 key
-      tools,
-
-      dataValue: coalesce(this.value, this.defaultValue),
-
-      date: null,
-    };
-  },
-  watch: {
-    value: {
-      handler(v) {
-        this.dataValue = v;
+  ...uniComponent({
+    name,
+    mixins: [usingConfig({ componentName })],
+    options: {
+      styleIsolation: 'shared',
+    },
+    controlledProps: [
+      {
+        key: 'value',
+        event: 'change',
       },
-      immediate: true,
-      deep: true,
+    ],
+    externalClasses: [
+      `${prefix}-class`,
+      `${prefix}-class-confirm`,
+      `${prefix}-class-cancel`,
+      `${prefix}-class-title`,
+    ],
+    props: {
+      ...props,
+    },
+    emits: [
+      'update:visible',
+    ],
+    data() {
+      return {
+        prefix,
+        classPrefix: name,
+        columns: [],
+        columnsValue: [],
+        fullModes: [],
+        locale: dayjsLocaleMap[defaultLocale].i18n, // 国际化语言包
+        dayjsLocale: dayjsLocaleMap[defaultLocale].key, // dayjs 自适应的 key
+        tools,
+
+        dataValue: coalesce(this.value, this.defaultValue),
+
+        date: null,
+      };
     },
+    watch: {
+      value: {
+        handler(v) {
+          this.dataValue = v;
+        },
+        immediate: true,
+        deep: true,
+      },
 
-    start: 'updateColumns',
-    end: 'updateColumns',
-    dataValue: 'updateColumns',
-
-    customLocale: {
-      handler(v) {
-        if (!v || !dayjsLocaleMap[v].key) return;
-        this.locale = dayjsLocaleMap[v].i18n;
-        this.dayjsLocale = dayjsLocaleMap[v].key;
+      start: 'updateColumns',
+      end: 'updateColumns',
+      dataValue: 'updateColumns',
+
+      customLocale: {
+        handler(v) {
+          if (!v || !dayjsLocaleMap[v].key) return;
+          this.locale = dayjsLocaleMap[v].i18n;
+          this.dayjsLocale = dayjsLocaleMap[v].key;
+        },
+        immediate: true,
       },
-      immediate: true,
-    },
 
-    mode: {
-      handler(v, prev) {
+      mode: {
+        handler(v, prev) {
         // 解决 pick 事件触发两次问题
-        const checkEqual = () => {
-          if (!prev) return false;
-          let result = false;
-          try {
-            result = JSON.stringify(v) === JSON.stringify(prev);
-          } catch (e) {
+          const checkEqual = () => {
+            if (!prev) return false;
+            let result = false;
+            try {
+              result = JSON.stringify(v) === JSON.stringify(prev);
+            } catch (e) {
+              return result;
+            }
             return result;
-          }
-          return result;
-        };
-        if (checkEqual()) return;
-
-        const fullModes = this.getFullModeArray(v);
-        this.fullModes = fullModes;
-        this.updateColumns();
+          };
+          if (checkEqual()) return;
+
+          const fullModes = this.getFullModeArray(v);
+          this.fullModes = fullModes;
+          this.updateColumns();
+        },
+        immediate: true,
       },
-      immediate: true,
     },
-  },
-  created() {
+    created() {
     // created 时机并不准，uniapp 自己 mock 的
     // this.date = null;
-  },
-  mounted() {
-
-  },
-  methods: {
-    updateColumns() {
-      this.date = this.getParseDate();
+    },
+    mounted() {
 
-      const { columns, columnsValue } = this.getValueCols();
-      this.columns = columns,
-      this.columnsValue = columnsValue;
     },
+    methods: {
+      updateColumns() {
+        this.date = this.getParseDate();
 
-    getDaysOfWeekInMonth(date, type) {
-      const { locale, steps, dayjsLocale } = this;
-      const startOfMonth = date.startOf('month');
-      const minEdge = this.getOptionEdge('min', type);
-      const maxEdge = this.getOptionEdge('max', type);
-      const step = coalesce(steps?.[type], 1);
-      const daysOfWeek = [];
-
-      for (let i = minEdge; i <= maxEdge; i += step) {
-        const currentDate = startOfMonth.date(i).locale(dayjsLocale);
-        const dayName = currentDate.format('ddd');
-        daysOfWeek.push({
-          value: `${i}`,
-          label: `${i}${locale.date || ''} ${dayName}`,
-        });
-      }
+        const { columns, columnsValue } = this.getValueCols();
+        this.columns = columns,
+        this.columnsValue = columnsValue;
+      },
 
-      return daysOfWeek;
-    },
+      getDaysOfWeekInMonth(date, type) {
+        const { locale, steps, dayjsLocale } = this;
+        const startOfMonth = date.startOf('month');
+        const minEdge = this.getOptionEdge('min', type);
+        const maxEdge = this.getOptionEdge('max', type);
+        const step = coalesce(steps?.[type], 1);
+        const daysOfWeek = [];
+
+        for (let i = minEdge; i <= maxEdge; i += step) {
+          const currentDate = startOfMonth.date(i).locale(dayjsLocale);
+          const dayName = currentDate.format('ddd');
+          daysOfWeek.push({
+            value: `${i}`,
+            label: `${i}${locale.date || ''} ${dayName}`,
+          });
+        }
 
-    getParseDate() {
-      const { dataValue } = this;
-      const minDate = this.getMinDate();
+        return daysOfWeek;
+      },
 
-      const isTimeMode = this.isTimeMode();
-      let currentValue = dataValue;
+      getParseDate() {
+        const { dataValue } = this;
+        const minDate = this.getMinDate();
 
-      // 时间需要补齐前缀
-      if (isTimeMode) {
-        const dateStr = dayjs(minDate).format('YYYY-MM-DD');
-        currentValue = dayjs(`${dateStr} ${currentValue}`);
-      }
+        const isTimeMode = this.isTimeMode();
+        let currentValue = dataValue;
 
-      const parseDate = dayjs(currentValue || minDate);
-      const isDateValid = parseDate.isValid();
+        // 时间需要补齐前缀
+        if (isTimeMode) {
+          const dateStr = dayjs(minDate).format('YYYY-MM-DD');
+          currentValue = dayjs(`${dateStr} ${currentValue}`);
+        }
 
-      return isDateValid ? parseDate : minDate;
-    },
+        let parseDate = dayjs(currentValue || minDate);
 
-    normalize(val, defaultDay) {
-      return val && dayjs(val).isValid() ? dayjs(val) : defaultDay;
-    },
+        // 当直接解析失败时（如 "2021-12-23 周四"），尝试提取日期时间数字部分进行解析
+        if (!parseDate.isValid() && typeof currentValue === 'string') {
+        // 匹配常见的日期时间格式：YYYY-MM-DD 或 YYYY-MM-DD HH:mm:ss 等
+          const dateMatch = currentValue.match(/(\d{4}[-/]\d{1,2}[-/]\d{1,2}(\s+\d{1,2}:\d{1,2}(:\d{1,2})?)?)/);
+          if (dateMatch) {
+            parseDate = dayjs(dateMatch[1]);
+          }
+        }
 
-    getMinDate() {
-      return this.normalize(this.start, dayjs().subtract(10, 'year'));
-    },
+        const isDateValid = parseDate.isValid();
 
-    getMaxDate() {
-      return this.normalize(this.end, dayjs().add(10, 'year'));
-    },
+        return isDateValid ? parseDate : minDate;
+      },
 
-    getDateRect(type = 'default') {
-      const map = {
-        min: 'getMinDate',
-        max: 'getMaxDate',
-        default: 'getDate',
-      };
-      const date = this[map[type]]();
-      const keys = ['year', 'month', 'date', 'hour', 'minute', 'second'];
+      normalize(val, defaultDay) {
+        return val && dayjs(val).isValid() ? dayjs(val) : defaultDay;
+      },
 
-      return keys.map(k => date[k]?.());
-    },
+      getMinDate() {
+        return this.normalize(this.start, dayjs().subtract(10, 'year'));
+      },
 
-    getDate() {
-      return this.clipDate(this?.date || this.getMinDate());
-    },
+      getMaxDate() {
+        return this.normalize(this.end, dayjs().add(10, 'year'));
+      },
 
-    // 数据裁减 确保数据不越界
-    clipDate(date) {
-      const minDate = this.getMinDate();
-      const maxDate = this.getMaxDate();
-      return dayjs(Math.min(Math.max(minDate.valueOf(), date.valueOf()), maxDate.valueOf()));
-    },
+      getDateRect(type = 'default') {
+        const map = {
+          min: 'getMinDate',
+          max: 'getMaxDate',
+          default: 'getDate',
+        };
+        const date = this[map[type]]();
+        const keys = ['year', 'month', 'date', 'hour', 'minute', 'second'];
 
-    // 年变化时 需要修正 日数据  例如 2 月的 28 | 29
-    setYear(date, year) {
-      const beforeMonthDays = date.date();
-      const afterMonthDays = date.year(year).daysInMonth();
+        return keys.map(k => date[k]?.());
+      },
 
-      const tempDate = date.date(Math.min(beforeMonthDays.valueOf(), afterMonthDays.valueOf()));
-      return tempDate.year(year);
-    },
+      getDate() {
+        return this.clipDate(this?.date || this.getMinDate());
+      },
 
-    // 月变化时 需要修正 日数据边界
-    setMonth(date, month) {
-      const beforeMonthDays = date.date();
-      const afterMonthDays = date.month(month).daysInMonth();
+      // 数据裁减 确保数据不越界
+      clipDate(date) {
+        const minDate = this.getMinDate();
+        const maxDate = this.getMaxDate();
+        return dayjs(Math.min(Math.max(minDate.valueOf(), date.valueOf()), maxDate.valueOf()));
+      },
 
-      const tempDate = date.date(Math.min(beforeMonthDays.valueOf(), afterMonthDays.valueOf()));
-      return tempDate.month(month);
-    },
+      // 年变化时 需要修正 日数据  例如 2 月的 28 | 29
+      setYear(date, year) {
+        const beforeMonthDays = date.date();
+        const afterMonthDays = date.year(year).daysInMonth();
 
-    getColumnOptions() {
-      const { fullModes, filter } = this;
+        const tempDate = date.date(Math.min(beforeMonthDays.valueOf(), afterMonthDays.valueOf()));
+        return tempDate.year(year);
+      },
 
-      const columnOptions = [];
-      fullModes?.forEach((mode) => {
-        const columnOption = this.getOptionByType(mode);
-        if (typeof filter === 'function') {
-          columnOptions.push(filter(mode, columnOption));
-        } else {
-          columnOptions.push(columnOption);
-        }
-      });
-      return columnOptions;
-    },
+      // 月变化时 需要修正 日数据边界
+      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, filter } = this;
 
-    getOptionByType(type) {
-      const { locale, steps, showWeek } = this;
-      const options = [];
-
-      const minEdge = this.getOptionEdge('min', type);
-      const maxEdge = this.getOptionEdge('max', type);
-      const step = coalesce(steps?.[type], 1);
-      const dayjsMonthsShort = dayjs().locale(this.dayjsLocale)
-        .localeData()
-        .monthsShort();
-
-      if (type === 'date' && showWeek) {
-        return this.getDaysOfWeekInMonth(this.date, type);
-      }
-
-      for (let i = minEdge; i <= maxEdge; i += step) {
-        options.push({
-          value: `${i}`,
-          label: type === 'month' ? dayjsMonthsShort[i] : `${i + locale[type]}`,
+        const columnOptions = [];
+        fullModes?.forEach((mode) => {
+          const columnOption = this.getOptionByType(mode);
+          if (typeof filter === 'function') {
+            columnOptions.push(filter(mode, columnOption));
+          } else {
+            columnOptions.push(columnOption);
+          }
         });
-      }
+        return columnOptions;
+      },
 
-      return options;
-    },
+      getOptionByType(type) {
+        const { locale, steps, showWeek } = this;
+        const options = [];
 
-    getYearOptions(dateParams) {
-      const { locale } = this;
-      const { minDateYear, maxDateYear } = dateParams;
+        const minEdge = this.getOptionEdge('min', type);
+        const maxEdge = this.getOptionEdge('max', type);
+        const step = coalesce(steps?.[type], 1);
+        const dayjsMonthsShort = dayjs().locale(this.dayjsLocale)
+          .localeData()
+          .monthsShort();
 
-      const years = [];
-      for (let i = minDateYear; i <= maxDateYear; i += 1) {
-        years.push({
-          value: `${i}`,
-          label: `${i + locale.year}`,
-        });
-      }
-      return years;
-    },
+        if (type === 'date' && showWeek) {
+          return this.getDaysOfWeekInMonth(this.date, type);
+        }
 
-    getOptionEdge(minOrMax, type) {
-      const selDateArray = this.getDateRect();
-      const compareArray = this.getDateRect(minOrMax);
-      const edge = {
-        month: [0, 11],
-        date: [1, this.getDate().daysInMonth()],
-        hour: [0, 23],
-        minute: [0, 59],
-        second: [0, 59],
-      };
-      const types = ['year', 'month', 'date', 'hour', 'minute', 'second'];
+        for (let i = minEdge; i <= maxEdge; i += step) {
+          options.push({
+            value: `${i}`,
+            label: type === 'month' ? dayjsMonthsShort[i] : `${i + locale[type]}`,
+          });
+        }
 
-      for (let i = 0, size = selDateArray.length; i < size; i += 1) {
-        if (types[i] === type) return compareArray[i];
-        if (compareArray[i] !== selDateArray[i]) return edge[type][minOrMax === 'min' ? 0 : 1];
-      }
-      return edge[type][minOrMax === 'min' ? 0 : 1];
-    },
+        return options;
+      },
 
-    getMonthOptions() {
-      const months = [];
+      getYearOptions(dateParams) {
+        const { locale } = this;
+        const { minDateYear, maxDateYear } = dateParams;
 
-      const minMonth = this.getOptionEdge('min', 'month');
-      const maxMonth = this.getOptionEdge('max', 'month');
-      const dayjsMonthsShort = dayjs.monthsShort();
+        const years = [];
+        for (let i = minDateYear; i <= maxDateYear; i += 1) {
+          years.push({
+            value: `${i}`,
+            label: `${i + locale.year}`,
+          });
+        }
+        return years;
+      },
 
-      for (let i = minMonth; i <= maxMonth; i += 1) {
-        months.push({
-          value: `${i}`,
-          label: dayjsMonthsShort[i],
-        });
-      }
+      getOptionEdge(minOrMax, type) {
+        const selDateArray = this.getDateRect();
+        const compareArray = this.getDateRect(minOrMax);
+        const edge = {
+          month: [0, 11],
+          date: [1, this.getDate().daysInMonth()],
+          hour: [0, 23],
+          minute: [0, 59],
+          second: [0, 59],
+        };
+        const types = ['year', 'month', 'date', 'hour', 'minute', 'second'];
 
-      return months;
-    },
+        for (let i = 0, size = selDateArray.length; i < size; i += 1) {
+          if (types[i] === type) return compareArray[i];
+          if (compareArray[i] !== selDateArray[i]) return edge[type][minOrMax === 'min' ? 0 : 1];
+        }
+        return edge[type][minOrMax === 'min' ? 0 : 1];
+      },
 
-    getDayOptions() {
-      const { locale } = this;
-      const days = [];
-      const minDay = this.getOptionEdge('min', 'date');
-      const maxDay = this.getOptionEdge('max', 'date');
+      getMonthOptions() {
+        const months = [];
 
-      for (let i = minDay; i <= maxDay; i += 1) {
-        days.push({
-          value: `${i}`,
-          label: `${i + locale.day}`,
-        });
-      }
+        const minMonth = this.getOptionEdge('min', 'month');
+        const maxMonth = this.getOptionEdge('max', 'month');
+        const dayjsMonthsShort = dayjs.monthsShort();
 
-      return days;
-    },
+        for (let i = minMonth; i <= maxMonth; i += 1) {
+          months.push({
+            value: `${i}`,
+            label: dayjsMonthsShort[i],
+          });
+        }
 
-    getHourOptions() {
-      const { locale } = this;
-      const hours = [];
-      const minHour = this.getOptionEdge('min', 'hour');
-      const maxHour = this.getOptionEdge('max', 'hour');
+        return months;
+      },
 
-      for (let i = minHour; i <= maxHour; i += 1) {
-        hours.push({
-          value: `${i}`,
-          label: `${i + locale.hour}`,
-        });
-      }
+      getDayOptions() {
+        const { locale } = this;
+        const days = [];
+        const minDay = this.getOptionEdge('min', 'date');
+        const maxDay = this.getOptionEdge('max', 'date');
+
+        for (let i = minDay; i <= maxDay; i += 1) {
+          days.push({
+            value: `${i}`,
+            label: `${i + locale.day}`,
+          });
+        }
 
-      return hours;
-    },
+        return days;
+      },
 
-    getMinuteOptions() {
-      const { locale } = this;
-      const minutes = [];
-      const minMinute = this.getOptionEdge('min', 'minute');
-      const maxMinute = this.getOptionEdge('max', 'minute');
+      getHourOptions() {
+        const { locale } = this;
+        const hours = [];
+        const minHour = this.getOptionEdge('min', 'hour');
+        const maxHour = this.getOptionEdge('max', 'hour');
+
+        for (let i = minHour; i <= maxHour; i += 1) {
+          hours.push({
+            value: `${i}`,
+            label: `${i + locale.hour}`,
+          });
+        }
 
-      for (let i = minMinute; i <= maxMinute; i += 1) {
-        minutes.push({
-          value: `${i}`,
-          label: `${i + locale.minute}`,
-        });
-      }
+        return hours;
+      },
 
-      return minutes;
-    },
+      getMinuteOptions() {
+        const { locale } = this;
+        const minutes = [];
+        const minMinute = this.getOptionEdge('min', 'minute');
+        const maxMinute = this.getOptionEdge('max', 'minute');
+
+        for (let i = minMinute; i <= maxMinute; i += 1) {
+          minutes.push({
+            value: `${i}`,
+            label: `${i + locale.minute}`,
+          });
+        }
 
-    getValueCols() {
-      return {
-        columns: this.getColumnOptions(),
-        columnsValue: this.getColumnsValue(),
-      };
-    },
+        return minutes;
+      },
 
-    getColumnsValue() {
-      const { fullModes } = this;
-      const date = this.getDate();
+      getValueCols() {
+        return {
+          columns: this.getColumnOptions(),
+          columnsValue: this.getColumnsValue(),
+        };
+      },
 
-      const columnsValue = [];
+      getColumnsValue() {
+        const { fullModes } = this;
+        const date = this.getDate();
 
-      fullModes?.forEach((mode) => {
-        columnsValue.push(`${date[mode]()}`);
-      });
+        const columnsValue = [];
 
-      return columnsValue;
-    },
+        fullModes?.forEach((mode) => {
+          columnsValue.push(`${date[mode]()}`);
+        });
 
-    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;
-        case ModeItem.SECOND:
-          newValue = newValue.second(value);
-          break;
-        default:
-          break;
-      }
-
-      return this.clipDate(newValue);
-    },
+        return columnsValue;
+      },
 
-    onColumnChange(e) {
-      const { value, column } = e;
-      const { fullModes, format } = this;
+      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;
+          case ModeItem.SECOND:
+            newValue = newValue.second(value);
+            break;
+          default:
+            break;
+        }
 
-      const columnValue = value?.[column];
-      const columnType = fullModes?.[column];
+        return this.clipDate(newValue);
+      },
 
-      const newValue = this.getNewDate(parseInt(columnValue, 10), columnType);
+      onColumnChange(e) {
+        const { value, column } = e;
+        const { fullModes, format } = this;
 
-      this.date = newValue;
+        const columnValue = value?.[column];
+        const columnType = fullModes?.[column];
 
-      const { columns, columnsValue } = this.getValueCols();
+        const newValue = this.getNewDate(parseInt(columnValue, 10), columnType);
 
-      this.columns = columns;
-      this.columnsValue = columnsValue;
+        this.date = newValue;
 
-      const date = this.getDate();
-      const pickValue = format ? date.format(format) : date.valueOf();
+        const { columns, columnsValue } = this.getValueCols();
 
-      this.$emit('pick', { value: pickValue });
-    },
+        this.columns = columns;
+        this.columnsValue = columnsValue;
 
-    onConfirm() {
-      const { format } = this;
-      const date = this.getDate();
+        const date = this.getDate();
+        const pickValue = format ? date.format(format) : date.valueOf();
 
-      const value = format ? date.format(format) : date.valueOf();
-      this._trigger('change', { value });
-      this.$emit('confirm', { value });
-      this.resetColumns();
-    },
+        this.$emit('pick', { value: pickValue });
+      },
 
-    onCancel() {
-      this.resetColumns();
-      this.$emit('cancel');
-    },
+      onConfirm() {
+        const { format } = this;
+        const date = this.getDate();
 
-    onVisibleChange(e) {
-      if (!e.visible) {
+        const value = format ? date.format(format) : date.valueOf();
+        this._trigger('change', { value });
+        this.$emit('confirm', { value });
         this.resetColumns();
-      }
-    },
+      },
 
-    onClose(e) {
-      const { trigger } = e;
+      onCancel() {
+        this.resetColumns();
+        this.$emit('cancel');
+      },
 
-      this.$emit('close', { trigger });
-      this.$emit('update:visible', false);
-    },
+      onVisibleChange(e) {
+        if (!e.visible) {
+          this.resetColumns();
+        }
+      },
 
-    resetColumns() {
-      const parseDate = this.getParseDate();
+      onClose(e) {
+        const { trigger } = e;
 
-      this.date = parseDate;
+        this.$emit('close', { trigger });
+        this.$emit('update:visible', false);
+      },
 
-      const { columns, columnsValue } = this.getValueCols();
+      resetColumns() {
+        const parseDate = this.getParseDate();
 
-      this.columns = columns;
-      this.columnsValue = columnsValue;
-    },
+        this.date = parseDate;
 
-    // 将简写的 mode 转化成枚举值
-    getFullModeArray(mode) {
-    // 简易模式
-      if (typeof mode === 'string' || mode instanceof String) {
-        return this.getFullModeByModeString(mode, FULL_MODES);
-      }
-
-      // 高级模式
-      if (Array.isArray(mode)) {
-        if (mode?.length === 1) {
-          return this.getFullModeByModeString(mode[0], FULL_MODES);
+        const { columns, columnsValue } = this.getValueCols();
+
+        this.columns = columns;
+        this.columnsValue = columnsValue;
+      },
+
+      // 将简写的 mode 转化成枚举值
+      getFullModeArray(mode) {
+        // 简易模式
+        if (typeof mode === 'string' || mode instanceof String) {
+          return this.getFullModeByModeString(mode, FULL_MODES);
         }
 
-        if (mode?.length === 2) {
-          const dateModes = this.getFullModeByModeString(mode[0], DATE_MODES);
-          const timeModes = this.getFullModeByModeString(mode[1], TIME_MODES);
-          return [...dateModes, ...timeModes];
+        // 高级模式
+        if (Array.isArray(mode)) {
+          if (mode?.length === 1) {
+            return this.getFullModeByModeString(mode[0], FULL_MODES);
+          }
+
+          if (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 [];
-      }
+      getFullModeByModeString(modeString, matchModes) {
+        if (!modeString) {
+          return [];
+        }
 
-      const endIndex = matchModes?.findIndex(mode => modeString === mode);
-      return matchModes?.slice(0, endIndex + 1);
-    },
+        const endIndex = matchModes?.findIndex(mode => modeString === mode);
+        return matchModes?.slice(0, endIndex + 1);
+      },
 
-    // 仅展示时或者时分 需要单独特殊处理
-    isTimeMode() {
-      const { fullModes } = this;
-      return fullModes[0] === ModeItem.HOUR;
+      // 仅展示时或者时分 需要单独特殊处理
+      isTimeMode() {
+        const { fullModes } = this;
+        return fullModes[0] === ModeItem.HOUR;
+      },
     },
-  },
 
 
-});
+  }),
+};
 </script>
 <style scoped src="./date-time-picker.css"></style>