feat(DateTimePicker): support formatter props

Author: anlyyao

src/date-time-picker/README.en-US.md

@@ -16,6 +16,7 @@ end | String / Number | - | \- | N
 filter | Function | - | Typescript：`(type: TimeModeValues, columns: DateTimePickerColumn) => DateTimePickerColumn` `type DateTimePickerColumn = DateTimePickerColumnItem[]` `interface DateTimePickerColumnItem { label: string,value: string}`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/date-time-picker/type.ts) | N
 footer | Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 format | String | 'YYYY-MM-DD HH:mm:ss' | \- | N
+formatter | Function | - | Typescript：`(option: DateTimePickerColumnItem, columnIndex: number) => DateTimePickerColumnItem` | N
 header | Boolean / Slot | true | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 mode | String / Array | 'date' | Typescript：`DateTimePickerMode` `type DateTimePickerMode = TimeModeValues \| Array<TimeModeValues> ` `type TimeModeValues = 'year' \| 'month' \| 'date' \| 'hour' \| 'minute' \| 'second'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/date-time-picker/type.ts) | N
 popup-props | Object | {} | popup properties。Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/date-time-picker/type.ts) | N

src/date-time-picker/README.md

@@ -70,9 +70,10 @@ end | String / Number | - | 选择器的最大可选时间，默认为当前时
 filter | Function | - | 列选项过滤函数，支持自定义列内容。(type 值可为: year, month, date, hour, minute, second)。TS 类型：`(type: TimeModeValues, columns: DateTimePickerColumn) => DateTimePickerColumn` `type DateTimePickerColumn = DateTimePickerColumnItem[]` `interface DateTimePickerColumnItem { label: string,value: string}`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/date-time-picker/type.ts) | N
 footer | Slot | - | 底部内容。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 format | String | 'YYYY-MM-DD HH:mm:ss' | 用于格式化 pick、change、confirm 事件返回的值，[详细文档](https://day.js.org/docs/en/display/format) | N
+formatter | Function | - | 格式化标签。TS 类型：`(option: DateTimePickerColumnItem, columnIndex: number) => DateTimePickerColumnItem` | N
 header | Boolean / Slot | true | 头部内容。值为 true 显示空白头部，值为 false 不显示任何内容。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | 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
-popup-props | Object | {} | 透传 `Popup` 组件全部属性。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/date-time-picker/type.ts) | N
+popup-props | Object | {} | 透传 Popup 组件全部属性。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/date-time-picker/type.ts) | N
 show-week | Boolean | false | 【开发中】是否在日期旁边显示周几（如周一，周二，周日等） | N
 start | String / Number | - | 选择器的最小可选时间，默认为当前时间-10年 | N
 steps | Object | - | 时间间隔步数，示例：`{ minute: 5 }` | N

src/date-time-picker/__test__/__snapshots__/demo.test.js.snap

@@ -182,6 +182,7 @@ exports[`DateTimePicker DateTimePicker year-month-date demo works fine 1`] = `
     end="2030-09-09 12:12:12"
     filter="{{[Function]}}"
     format="YYYY-MM-DD"
+    formatter="{{[Function]}}"
     mode="date"
     popupProps="{{
       Object {

src/date-time-picker/_example/year-month-date/index.js

@@ -1,3 +1,18 @@
+const calendarMonth = [
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December',
+];
+
 Page({
   data: {
     mode: '',
@@ -17,6 +32,25 @@ Page({
     popupProps: {
       usingCustomNavbar: true,
     },
+
+    formatter(item, index) {
+      let label = item.label.slice(0, -1);
+      if (index === 1) {
+        label = calendarMonth[Number(label) - 1];
+      }
+      if (index === 2) {
+        const suffixes = {
+          1: 'st',
+          2: 'nd',
+          3: 'rd',
+        };
+        label = `${label}${suffixes[label] || 'th'}`;
+      }
+      return {
+        value: item.value,
+        label,
+      };
+    },
   },
   showPicker(e) {
     const { mode } = e.currentTarget.dataset;

src/date-time-picker/_example/year-month-date/index.wxml

@@ -20,6 +20,7 @@
   start="{{start}}"
   end="{{end}}"
   filter="{{filter}}"
+  formatter="{{formatter}}"
   popup-props="{{popupProps}}"
   bindchange="onConfirm"
   bindpick="onColumnChange"

src/date-time-picker/date-time-picker.wxml

@@ -24,6 +24,7 @@
     class="{{_.cls(classPrefix + '__item', [['roomly', columns.length > 5 && index == 0]])}}"
     options="{{item}}"
     index="index"
+    format="{{formatter}}"
   />
   <slot slot="footer" name="footer" />
 </t-picker>

src/date-time-picker/props.ts

@@ -30,10 +30,6 @@ const props: TdDateTimePickerProps = {
   end: {
     type: null,
   },
-  /** 组件类名，分别用于设置组件外层元素、确认按钮、取消按钮、标题等元素类名 */
-  externalClasses: {
-    type: Array,
-  },
   /** 列选项过滤函数，支持自定义列内容。(type 值可为: year, month, date, hour, minute, second) */
   filter: {
     type: null,
@@ -43,6 +39,10 @@ const props: TdDateTimePickerProps = {
     type: String,
     value: 'YYYY-MM-DD HH:mm:ss',
   },
+  /** 格式化标签 */
+  formatter: {
+    type: null,
+  },
   /** 头部内容。值为 true 显示空白头部，值为 false 不显示任何内容 */
   header: {
     type: Boolean,
@@ -53,7 +53,7 @@ const props: TdDateTimePickerProps = {
     type: null,
     value: 'date',
   },
-  /** 透传 `Popup` 组件全部属性 */
+  /** 透传 Popup 组件全部属性 */
   popupProps: {
     type: Object,
     value: {},

src/date-time-picker/type.ts

@@ -46,13 +46,6 @@ export interface TdDateTimePickerProps {
     type: null;
     value?: string | number;
   };
-  /**
-   * 组件类名，分别用于设置组件外层元素、确认按钮、取消按钮、标题等元素类名
-   */
-  externalClasses?: {
-    type: ArrayConstructor;
-    value?: ['t-class', 't-class-confirm', 't-class-cancel', 't-class-title'];
-  };
   /**
    * 列选项过滤函数，支持自定义列内容。(type 值可为: year, month, date, hour, minute, second)
    */
@@ -68,6 +61,13 @@ export interface TdDateTimePickerProps {
     type: StringConstructor;
     value?: string;
   };
+  /**
+   * 格式化标签
+   */
+  formatter?: {
+    type: undefined;
+    value?: (option: DateTimePickerColumnItem, columnIndex: number) => DateTimePickerColumnItem;
+  };
   /**
    * 头部内容。值为 true 显示空白头部，值为 false 不显示任何内容
    * @default true
@@ -85,7 +85,7 @@ export interface TdDateTimePickerProps {
     value?: DateTimePickerMode;
   };
   /**
-   * 透传 `Popup` 组件全部属性
+   * 透传 Popup 组件全部属性
    * @default {}
    */
   popupProps?: {