feat(datetime-picker): support steps property

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

@@ -9,12 +9,12 @@ 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 | `deprecated` | N
 format | String | 'YYYY-MM-DD HH:mm:ss' | \- | N
-header | Boolean / Slot | true | \- | 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
 show-week | Boolean | false | \- | N
 start | String / Number | - | \- | N
+steps | Object | - | \- | N
 title | String | - | title of picker | N
 value | String / Number | - | Typescript：`DateValue` `type DateValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/date-time-picker/type.ts) | N
 default-value | String / Number | undefined | uncontrolled property。Typescript：`DateValue` `type DateValue = string \| number`。[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

@@ -18,7 +18,7 @@ isComponent: true
 
 ## 代码演示
 
-### 日期选择器
+### 组件类型
 
 #### 年月日选择器
 
@@ -38,6 +38,12 @@ isComponent: true
 
 {{ date-all }}
 
+### 组件用法
+
+#### 调整步数
+
+{{ steps }}
+
 ## API
 ### DateTimePicker Props
 
@@ -47,12 +53,12 @@ cancel-btn | String | 取消 | 取消按钮文字 | N
 confirm-btn | String | - | 确定按钮文字 | N
 end | String / Number | - | 选择器的最大可选时间，默认为当前时间+10年 | N
 external-classes | Array | - | 组件类名，分别用于设置组件外层元素、确认按钮、取消按钮、标题等元素类名。`['t-class', 't-class-confirm', 't-class-cancel', 't-class-title']` | N
-footer | Slot | true | 已废弃。底部内容 | 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 不显示任何内容，值类型为 TNode 表示自定义头部内容 | N
-mode | String / Array | 'date' | year = 年；month = 年月；date = 年月日；hour = 年月日时； minute = 年月日时分；当类型为数组时，第一个值控制年月日，第二个值控制时分秒，示例：['null', 'second']或['date', '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
+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
+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 | - | 选择器的最小可选时间，默认为当前时间-10年 | N
+steps | Object | - | 时间间隔步数，示例：`{ minute: 5 }` | 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

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

@@ -24,6 +24,39 @@ exports[`DateTimePicker DateTimePicker date-all demo works fine 1`] = `
 </date-all>
 `;
 
+exports[`DateTimePicker DateTimePicker steps demo works fine 1`] = `
+<steps>
+  <t-cell
+    arrow="{{true}}"
+    hover="{{true}}"
+    note=""
+    tClass="pannel-item"
+    title="选择时间"
+    bind:tap="showPicker"
+  />
+  <t-date-time-picker
+    format="HH:mm:ss"
+    mode="{{
+      Array [
+        "null",
+        "second",
+      ]
+    }}"
+    steps="{{
+      Object {
+        "minute": 5,
+      }
+    }}"
+    title="选择时间"
+    value="10:00:00"
+    visible="{{false}}"
+    bind:cancel="hidePicker"
+    bind:change="onConfirm"
+    bind:pick="onColumnChange"
+  />
+</steps>
+`;
+
 exports[`DateTimePicker DateTimePicker time demo works fine 1`] = `
 <time>
   <wx-view

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

@@ -5,7 +5,7 @@
 import simulate from 'miniprogram-simulate';
 import path from 'path';
 
-const mapper = ['date-all', 'time', 'year-month', 'year-month-date'];
+const mapper = ['date-all', 'steps', 'time', 'year-month', 'year-month-date'];
 
 describe('DateTimePicker', () => {
   mapper.forEach((demoName) => {

src/date-time-picker/_example/date-time-picker.json

@@ -4,6 +4,7 @@
     "year-month-date": "./year-month-date",
     "year-month": "./year-month",
     "time": "./time",
-    "date-all": "./date-all"
+    "date-all": "./date-all",
+    "steps": "./steps"
   }
 }

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

@@ -11,5 +11,9 @@
   <t-demo desc="年月日时分秒选择器" />
   <date-all />
 
+  <t-demo title="01 组件用法" desc="调整步数">
+    <steps />
+  </t-demo>
+
   <!-- <t-demo desc="选择器" /> -->
 </view>

src/date-time-picker/_example/steps/index.js

@@ -0,0 +1,35 @@
+Component({
+  data: {
+    text: '',
+    value: '10:00:00',
+    visible: false,
+  },
+  methods: {
+    showPicker() {
+      this.setData({
+        visible: true,
+      });
+    },
+    hidePicker() {
+      this.setData({
+        visible: false,
+      });
+    },
+    onConfirm(e) {
+      const { value } = e.detail;
+
+      console.log('confim', value);
+
+      this.setData({
+        value,
+        text: value,
+      });
+
+      this.hidePicker();
+    },
+
+    onColumnChange(e) {
+      console.log('pick', e.detail.value);
+    },
+  },
+});

src/date-time-picker/_example/steps/index.json

@@ -0,0 +1,6 @@
+{
+  "usingComponents": {
+    "t-cell": "tdesign-miniprogram/cell/cell",
+    "t-date-time-picker": "tdesign-miniprogram/date-time-picker/date-time-picker"
+  }
+}

src/date-time-picker/_example/steps/index.wxml

@@ -0,0 +1,13 @@
+<t-cell title="选择时间" hover note="{{text || ''}}" arrow bindtap="showPicker" t-class="pannel-item" />
+
+<t-date-time-picker
+  title="选择时间"
+  visible="{{visible}}"
+  value="{{value}}"
+  format="HH:mm:ss"
+  mode="{{['null', 'second']}}"
+  steps="{{ { minute: 5 } }}"
+  bindchange="onConfirm"
+  bindpick="onColumnChange"
+  bindcancel="hidePicker"
+/>

src/date-time-picker/_example/steps/index.wxss

@@ -0,0 +1,3 @@
+.pannel-item {
+  margin: 32rpx 0;
+}

src/date-time-picker/date-time-picker.ts

@@ -166,13 +166,14 @@ export default class DateTimePicker extends SuperComponent {
     },
 
     getOptionByType(type) {
-      const { locale } = this.data;
+      const { locale, steps } = this.data;
       const options: ColumnItemValue[] = [];
 
       const minEdge = this.getOptionEdge('min', type);
       const maxEdge = this.getOptionEdge('max', type);
+      const step = steps?.[type] ?? 1;
 
-      for (let i = minEdge; i <= maxEdge; i += 1) {
+      for (let i = minEdge; i <= maxEdge; i += step) {
         const label = type === 'month' ? i + 1 : i;
         options.push({
           value: `${i}`,

src/date-time-picker/props.ts

@@ -24,12 +24,12 @@ const props: TdDateTimePickerProps = {
   externalClasses: {
     type: Array,
   },
-  /** 用于格式化日期，[详细文档](https://day.js.org/docs/en/display/format) */
+  /** 用于格式化 pick、change、confirm 事件返回的值，[详细文档](https://day.js.org/docs/en/display/format) */
   format: {
     type: String,
-    value: '',
+    value: 'YYYY-MM-DD HH:mm:ss',
   },
-  /** 头部内容。值为 true 显示空白头部，值为 false 不显示任何内容，值类型为 TNode 表示自定义头部内容 */
+  /** 头部内容。值为 true 显示空白头部，值为 false 不显示任何内容 */
   header: {
     type: Boolean,
     value: true,
@@ -48,6 +48,10 @@ const props: TdDateTimePickerProps = {
   start: {
     type: null,
   },
+  /** 时间间隔步数，示例：`{ minute: 5 }` */
+  steps: {
+    type: Object,
+  },
   /** 标题 */
   title: {
     type: String,

src/date-time-picker/type.ts

@@ -3,6 +3,7 @@
 /**
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
+
 export interface TdDateTimePickerProps {
   /**
    * 取消按钮文字
@@ -35,15 +36,15 @@ export interface TdDateTimePickerProps {
     value?: ['t-class', 't-class-confirm', 't-class-cancel', 't-class-title'];
   };
   /**
-   * 用于格式化日期，[详细文档](https://day.js.org/docs/en/display/format)
-   * @default ''
+   * 用于格式化 pick、change、confirm 事件返回的值，[详细文档](https://day.js.org/docs/en/display/format)
+   * @default 'YYYY-MM-DD HH:mm:ss'
    */
   format?: {
     type: StringConstructor;
     value?: string;
   };
   /**
-   * 头部内容。值为 true 显示空白头部，值为 false 不显示任何内容，值类型为 TNode 表示自定义头部内容
+   * 头部内容。值为 true 显示空白头部，值为 false 不显示任何内容
    * @default true
    */
   header?: {
@@ -73,6 +74,13 @@ export interface TdDateTimePickerProps {
     type: null;
     value?: string | number;
   };
+  /**
+   * 时间间隔步数，示例：`{ minute: 5 }`
+   */
+  steps?: {
+    type: ObjectConstructor;
+    value?: object;
+  };
   /**
    * 标题
    * @default ''