feat(DateTimePicker): add filter props

packages/products/tdesign-miniprogram/src/date-time-picker/README.en-US.md

@@ -12,6 +12,7 @@ cancel-btn | String | 取消 | \- | N
 confirm-btn | String | - | \- | N
 custom-locale | String | zh | \- | N
 end | String / Number | - | \- | N
+filter | Function | - | \- | 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
 header | Boolean / Slot | true | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
@@ -35,6 +36,7 @@ change | `(value: DateValue)` | \-
 close | `(trigger: TriggerSource)` | `1.0.1`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/date-time-picker/type.ts)。<br/>`type TriggerSource = 'overlay' \| 'cancel-btn' \| 'confirm-btn'`<br/>
 confirm | `(value: DateValue)` | `1.0.1`
 pick | `(value: DateValue)` | \-
+
 ### DateTimePicker External Classes
 
 className | Description

packages/products/tdesign-miniprogram/src/date-time-picker/README.md

@@ -12,6 +12,7 @@ cancel-btn | String | 取消 | 取消按钮文字 | N
 confirm-btn | String | - | 确定按钮文字 | N
 custom-locale | String | zh |  组件国际化语言，目前支持: 简体中文(zh)、(tc)、英文(en)、日语(ja)、韩语(ko)、俄语(ru)等六种语言 | N
 end | String / Number | - | 选择器的最大可选时间，默认为当前时间+10年 | N
+filter | Function | - | 列选项过滤函数，支持自定义列内容。(type 值可为: year, month, date, hour, minute, second) | 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
 header | Boolean / Slot | true | 头部内容。值为 true 显示空白头部，值为 false 不显示任何内容。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
@@ -35,6 +36,7 @@ change | `(value: DateValue)` | 确认按钮点击时触发
 close | `(trigger: TriggerSource)` | `1.0.1`。关闭时触发。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/date-time-picker/type.ts)。<br/>`type TriggerSource = 'overlay' \| 'cancel-btn' \| 'confirm-btn'`<br/>
 confirm | `(value: DateValue)` | `1.0.1`。确认按钮点击时触发
 pick | `(value: DateValue)` | 选中值发生变化时触发
+
 ### DateTimePicker External Classes
 
 类名 | 描述

packages/products/tdesign-miniprogram/src/date-time-picker/props.ts

@@ -29,6 +29,10 @@ const props: TdDateTimePickerProps = {
   externalClasses: {
     type: Array,
   },
+  /** 列选项过滤函数，支持自定义列内容。(type 值可为: year, month, date, hour, minute, second) */
+  filter: {
+    type: null,
+  },
   /** 用于格式化 pick、change、confirm 事件返回的值，[详细文档](https://day.js.org/docs/en/display/format) */
   format: {
     type: String,

packages/products/tdesign-miniprogram/src/date-time-picker/type.ts

@@ -45,6 +45,13 @@ export interface TdDateTimePickerProps {
     type: ArrayConstructor;
     value?: ['t-class', 't-class-confirm', 't-class-cancel', 't-class-title'];
   };
+  /**
+   * 列选项过滤函数，支持自定义列内容。(type 值可为: year, month, date, hour, minute, second)
+   */
+  filter?: {
+    type: undefined;
+    value?: null;
+  };
   /**
    * 用于格式化 pick、change、confirm 事件返回的值，[详细文档](https://day.js.org/docs/en/display/format)
    * @default 'YYYY-MM-DD HH:mm:ss'

packages/products/tdesign-mobile-react/src/date-time-picker/date-time-picker.en-US.md

@@ -0,0 +1,33 @@
+:: BASE_DOC ::
+
+## API
+
+
+### DateTimePicker Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+className | String | - | className of component | N
+style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
+cancelBtn | String | 取消 | \- | N
+confirmBtn | String | - | \- | N
+end | String / Number | - | \- | N
+filter | Function | - | \- | N
+footer | TElement | true | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+format | String | 'YYYY-MM-DD HH:mm:ss' | \- | N
+header | TNode | true | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/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-mobile-react/tree/develop/src/date-time-picker/type.ts) | N
+renderLabel | Function | - | Typescript：`(type: string, value: number) => string` | N
+showWeek | Boolean | false | \- | N
+start | String / Number | - | \- | N
+steps | Object | - | \- | N
+title | String | - | title of picker | N
+usePopup | Boolean | true | \- | N
+value | String / Number | - | Typescript：`DateValue` `type DateValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/date-time-picker/type.ts) | N
+defaultValue | String / Number | - | uncontrolled property。Typescript：`DateValue` `type DateValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/date-time-picker/type.ts) | N
+visible | Boolean | false | \- | N
+onCancel | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
+onChange | Function |  | Typescript：`(value: DateValue) => void`<br/> | N
+onClose | Function |  | Typescript：`(trigger: TriggerSource) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/date-time-picker/type.ts)。<br/>`type TriggerSource = 'overlay' \| 'cancel-btn' \| 'confirm-btn'`<br/> | N
+onConfirm | Function |  | Typescript：`(value: DateValue) => void`<br/> | N
+onPick | Function |  | Typescript：`(value: DateValue) => void`<br/> | N

packages/products/tdesign-mobile-react/src/date-time-picker/date-time-picker.md

@@ -0,0 +1,33 @@
+:: BASE_DOC ::
+
+## API
+
+
+### DateTimePicker Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+className | String | - | 类名 | N
+style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
+cancelBtn | String | 取消 | 取消按钮文字 | N
+confirmBtn | String | - | 确定按钮文字 | N
+end | String / Number | - | 选择器的最大可选时间，默认为当前时间+10年 | N
+filter | Function | - | 列选项过滤函数，支持自定义列内容。(type 值可为: year, month, date, hour, minute, second) | N
+footer | TElement | true | 底部内容。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+format | String | 'YYYY-MM-DD HH:mm:ss' | 用于格式化 pick、change、confirm 事件返回的值，[详细文档](https://day.js.org/docs/en/display/format) | N
+header | TNode | true | 头部内容。值为 true 显示空白头部，值为 false 不显示任何内容。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/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-mobile-react/tree/develop/src/date-time-picker/type.ts) | N
+renderLabel | Function | - | 自定义label。TS 类型：`(type: string, value: number) => string` | N
+showWeek | Boolean | false | 【开发中】是否在日期旁边显示周几（如周一，周二，周日等） | N
+start | String / Number | - | 选择器的最小可选时间，默认为当前时间-10年 | N
+steps | Object | - | 时间间隔步数，示例：`{ minute: 5 }` | N
+title | String | - | 标题 | N
+usePopup | Boolean | true | 是否使用弹出层包裹 | N
+value | String / Number | - | 选中值。TS 类型：`DateValue` `type DateValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/date-time-picker/type.ts) | N
+defaultValue | String / Number | - | 选中值。非受控属性。TS 类型：`DateValue` `type DateValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/date-time-picker/type.ts) | N
+visible | Boolean | false | 是否显示 | N
+onCancel | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>取消按钮点击时触发 | N
+onChange | Function |  | TS 类型：`(value: DateValue) => void`<br/>value改变时触发 | N
+onClose | Function |  | TS 类型：`(trigger: TriggerSource) => void`<br/>关闭时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/date-time-picker/type.ts)。<br/>`type TriggerSource = 'overlay' \| 'cancel-btn' \| 'confirm-btn'`<br/> | N
+onConfirm | Function |  | TS 类型：`(value: DateValue) => void`<br/>确认按钮点击时触发 | N
+onPick | Function |  | TS 类型：`(value: DateValue) => void`<br/>选中值发生变化时触发 | N

packages/products/tdesign-mobile-react/src/date-time-picker/defaultProps.ts

@@ -0,0 +1,16 @@
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdDateTimePickerProps } from './type';
+
+export const dateTimePickerDefaultProps: TdDateTimePickerProps = {
+  cancelBtn: '取消',
+  footer: true,
+  format: 'YYYY-MM-DD HH:mm:ss',
+  header: true,
+  mode: 'date',
+  showWeek: false,
+  usePopup: true,
+  visible: false,
+};

packages/products/tdesign-mobile-react/src/date-time-picker/type.ts

@@ -0,0 +1,117 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TNode, TElement } from '../common';
+import { MouseEvent } from 'react';
+
+export interface TdDateTimePickerProps {
+  /**
+   * 取消按钮文字
+   * @default 取消
+   */
+  cancelBtn?: string;
+  /**
+   * 确定按钮文字
+   * @default ''
+   */
+  confirmBtn?: string;
+  /**
+   * 选择器的最大可选时间，默认为当前时间+10年
+   */
+  end?: string | number;
+  /**
+   * 列选项过滤函数，支持自定义列内容。(type 值可为: year, month, date, hour, minute, second)
+   */
+  filter?: function;
+  /**
+   * 底部内容
+   * @default true
+   */
+  footer?: TElement;
+  /**
+   * 用于格式化 pick、change、confirm 事件返回的值，[详细文档](https://day.js.org/docs/en/display/format)
+   * @default 'YYYY-MM-DD HH:mm:ss'
+   */
+  format?: string;
+  /**
+   * 头部内容。值为 true 显示空白头部，值为 false 不显示任何内容
+   * @default true
+   */
+  header?: TNode;
+  /**
+   * year = 年；month = 年月；date = 年月日；hour = 年月日时； minute = 年月日时分；当类型为数组时，第一个值控制年月日，第二个值控制时分秒
+   * @default 'date'
+   */
+  mode?: DateTimePickerMode;
+  /**
+   * 自定义label
+   */
+  renderLabel?: (type: string, value: number) => string;
+  /**
+   * 【开发中】是否在日期旁边显示周几（如周一，周二，周日等）
+   * @default false
+   */
+  showWeek?: boolean;
+  /**
+   * 选择器的最小可选时间，默认为当前时间-10年
+   */
+  start?: string | number;
+  /**
+   * 时间间隔步数，示例：`{ minute: 5 }`
+   */
+  steps?: object;
+  /**
+   * 标题
+   * @default ''
+   */
+  title?: string;
+  /**
+   * 是否使用弹出层包裹
+   * @default true
+   */
+  usePopup?: boolean;
+  /**
+   * 选中值
+   */
+  value?: DateValue;
+  /**
+   * 选中值，非受控属性
+   */
+  defaultValue?: DateValue;
+  /**
+   * 是否显示
+   * @default false
+   */
+  visible?: boolean;
+  /**
+   * 取消按钮点击时触发
+   */
+  onCancel?: (context: { e: MouseEvent<HTMLButtonElement> }) => void;
+  /**
+   * value改变时触发
+   */
+  onChange?: (value: DateValue) => void;
+  /**
+   * 关闭时触发
+   */
+  onClose?: (trigger: TriggerSource) => void;
+  /**
+   * 确认按钮点击时触发
+   */
+  onConfirm?: (value: DateValue) => void;
+  /**
+   * 选中值发生变化时触发
+   */
+  onPick?: (value: DateValue) => void;
+}
+
+export type DateTimePickerMode = TimeModeValues | Array<TimeModeValues>;
+
+export type TimeModeValues = 'year' | 'month' | 'date' | 'hour' | 'minute' | 'second';
+
+export type DateValue = string | number;
+
+export type TriggerSource = 'overlay' | 'cancel-btn' | 'confirm-btn';

packages/products/tdesign-mobile-vue/src/date-time-picker/date-time-picker.en-US.md

@@ -9,12 +9,14 @@ name | type | default | description | required
 cancelBtn | String | 取消 | \- | N
 confirmBtn | String | - | \- | N
 end | String / Number | - | \- | N
+filter | Function | - | \- | N
 format | String | 'YYYY-MM-DD HH:mm:ss' | \- | 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-mobile-vue/tree/develop/src/date-time-picker/type.ts) | N
 renderLabel | Function | - | Typescript：`(type: string, value: number) => string` | N
 showWeek | Boolean | false | \- | N
 start | String / Number | - | \- | N
 title | String | '选择时间' | title of picker | N
+usePopup | Boolean | true | \- | N
 value | String / Number | - | `v-model` and `v-model:value` is supported。Typescript：`DateValue` `type DateValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/date-time-picker/type.ts) | N
 defaultValue | String / Number | - | uncontrolled property。Typescript：`DateValue` `type DateValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/date-time-picker/type.ts) | N
 onCancel | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N

packages/products/tdesign-mobile-vue/src/date-time-picker/date-time-picker.md

@@ -9,12 +9,14 @@
 cancelBtn | String | 取消 | 取消按钮文字 | N
 confirmBtn | String | - | 确定按钮文字 | N
 end | String / Number | - | 选择器的最大可选时间，默认为当前时间+10年 | N
+filter | Function | - | 列选项过滤函数，支持自定义列内容。(type 值可为: year, month, date, hour, minute, second) | N
 format | String | 'YYYY-MM-DD HH:mm:ss' | 用于pick、change、confirm事件参数格式化[详细文档](https://day.js.org/docs/en/display/format) | 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-mobile-vue/tree/develop/src/date-time-picker/type.ts) | N
 renderLabel | Function | - | 自定义label。TS 类型：`(type: string, value: number) => string` | N
 showWeek | Boolean | false | 【开发中】是否在日期旁边显示周几（如周一，周二，周日等） | N
 start | String / Number | - | 选择器的最小可选时间，默认为当前时间-10年 | N
 title | String | '选择时间' | 标题 | N
+usePopup | Boolean | true | 是否使用弹出层包裹 | N
 value | String / Number | - | 选中值。支持语法糖 `v-model` 或 `v-model:value`。TS 类型：`DateValue` `type DateValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/date-time-picker/type.ts) | N
 defaultValue | String / Number | - | 选中值。非受控属性。TS 类型：`DateValue` `type DateValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/date-time-picker/type.ts) | N
 onCancel | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>取消按钮点击时触发 | N

packages/products/tdesign-mobile-vue/src/date-time-picker/props.ts

@@ -0,0 +1,80 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdDateTimePickerProps } from './type';
+import { PropType } from 'vue';
+
+export default {
+  /** 取消按钮文字 */
+  cancelBtn: {
+    type: String,
+    default: '取消',
+  },
+  /** 确定按钮文字 */
+  confirmBtn: {
+    type: String,
+    default: '',
+  },
+  /** 选择器的最大可选时间，默认为当前时间+10年 */
+  end: {
+    type: [String, Number] as PropType<TdDateTimePickerProps['end']>,
+  },
+  /** 列选项过滤函数，支持自定义列内容。(type 值可为: year, month, date, hour, minute, second) */
+  filter: {
+    type: Function as PropType<TdDateTimePickerProps['filter']>,
+  },
+  /** 用于pick、change、confirm事件参数格式化[详细文档](https://day.js.org/docs/en/display/format) */
+  format: {
+    type: String,
+    default: 'YYYY-MM-DD HH:mm:ss',
+  },
+  /** year = 年；month = 年月；date = 年月日；hour = 年月日时； minute = 年月日时分；当类型为数组时，第一个值控制年月日，第二个值控制时分秒 */
+  mode: {
+    type: [String, Array] as PropType<TdDateTimePickerProps['mode']>,
+    default: 'date',
+  },
+  /** 自定义label */
+  renderLabel: {
+    type: Function as PropType<TdDateTimePickerProps['renderLabel']>,
+  },
+  /** 【开发中】是否在日期旁边显示周几（如周一，周二，周日等） */
+  showWeek: Boolean,
+  /** 选择器的最小可选时间，默认为当前时间-10年 */
+  start: {
+    type: [String, Number] as PropType<TdDateTimePickerProps['start']>,
+  },
+  /** 标题 */
+  title: {
+    type: String,
+    default: '选择时间',
+  },
+  /** 是否使用弹出层包裹 */
+  usePopup: {
+    type: Boolean,
+    default: true,
+  },
+  /** 选中值 */
+  value: {
+    type: [String, Number] as PropType<TdDateTimePickerProps['value']>,
+    default: undefined,
+  },
+  modelValue: {
+    type: [String, Number] as PropType<TdDateTimePickerProps['value']>,
+    default: undefined,
+  },
+  /** 选中值，非受控属性 */
+  defaultValue: {
+    type: [String, Number] as PropType<TdDateTimePickerProps['defaultValue']>,
+  },
+  /** 取消按钮点击时触发 */
+  onCancel: Function as PropType<TdDateTimePickerProps['onCancel']>,
+  /** value改变时触发 */
+  onChange: Function as PropType<TdDateTimePickerProps['onChange']>,
+  /** 确认按钮点击时触发 */
+  onConfirm: Function as PropType<TdDateTimePickerProps['onConfirm']>,
+  /** 选中值发生变化时触发 */
+  onPick: Function as PropType<TdDateTimePickerProps['onPick']>,
+};