feat: ✨ DatetimePicker 支持time和date-time类型下配置选择到秒 (#1117)

✅ Closes: #844

Author: Moonofweisheng

docs/component/datetime-picker-view.md

@@ -64,9 +64,29 @@ const value = ref<number>(Date.now())
 const value4 = ref<string>('11:12')
 ```
 
-## 修改内部格式
+## time 类型（带秒）
+
+`time` 类型设置 `use-second` 属性可以展示时分秒，绑定值为 `HH:mm:ss` 格式。
+
+```html
+<wd-datetime-picker-view type="time" v-model="value" label="时分秒" use-second />
+```
+```typescript
+const value = ref<string>('11:12:30')
+```
+
+## datetime 类型（带秒）
 
+`datetime` 类型设置 `use-second` 属性可以展示年月日时分秒，绑定值为时间戳。
 
+```html
+<wd-datetime-picker-view type="datetime" v-model="value" label="年月日时分秒" use-second />
+```
+```typescript
+const value = ref<number>(Date.now())
+```
+
+## 修改内部格式
 
 给 `formatter` 属性传入一个函数，接收 `type` 和 `value` 值，返回展示的文本内容。`type` 有 `year`、`month`、`date`、`hour`、`minute` 类型，`value` 为 `number` 类型。
 使用自定义`formatter`会关闭内置的默认`display-format`函数。
@@ -133,6 +153,8 @@ const filter = (type, values) => {
 | minMinute | 最小分钟，time类型时生效 | number | - | 0 | - |
 | maxMinute | 最大分钟，time类型时生效 | number | - | 59 | - |
 | immediate-change | 是否在手指松开时立即触发picker-view的 change 事件。若不开启则会在滚动动画结束后触发 change 事件，1.2.25版本起提供，仅微信小程序和支付宝小程序支持。 | boolean | - | false | 1.2.25 |
+| use-second | 是否显示秒选择，仅在 time 和 datetime 类型下生效 | boolean | - | false | $LOWEST_VERSION$ |
+
 ## Events
 
 | 事件名称 | 说明 | 参数 | 最低版本 |

docs/component/datetime-picker.md

@@ -78,6 +78,28 @@ const value = ref<number>(Date.now())
 const value4 = ref<string>('09:20')
 ```
 
+## time 类型（带秒）
+
+`time` 类型设置 `use-second` 属性可以展示时分秒，绑定值为 `HH:mm:ss` 格式。
+
+```html
+<wd-datetime-picker type="time" v-model="value" label="时分秒" use-second />
+```
+```typescript
+const value = ref<string>('09:20:30')
+```
+
+## datetime 类型（带秒）
+
+`datetime` 类型设置 `use-second` 属性可以展示年月日时分秒，绑定值为时间戳。
+
+```html
+<wd-datetime-picker type="datetime" v-model="value" label="年月日时分秒" use-second />
+```
+```typescript
+const value = ref<number>(Date.now())
+```
+
 ## 修改展示格式
 
 
@@ -295,6 +317,7 @@ const displayFormatTabLabel = (items) => {
 | prop | 表单域 `model` 字段名，在使用表单校验功能的情况下，该属性是必填的 | string | - | - | - |
 | rules | 表单验证规则，结合`wd-form`组件使用	 | `FormItemRule []`	 | - | `[]` | - |
 | immediate-change | 是否在手指松开时立即触发picker-view的 change 事件。若不开启则会在滚动动画结束后触发 change 事件，1.2.25版本起提供，仅微信小程序和支付宝小程序支持。 | boolean | - | false | 1.2.25 |
+| use-second | 是否显示秒选择，仅在 time 和 datetime 类型下生效 | boolean | - | false | $LOWEST_VERSION$ |
 
 ### FormItemRule 数据结构
 

docs/en-US/component/datetime-picker-view.md

@@ -65,6 +65,28 @@ const value = ref<number>(Date.now())
 const value4 = ref<string>('11:12')
 ```
 
+## Time Type (with Seconds)
+
+`time` type with `use-second` property displays hour, minute and second, the binding value is in `HH:mm:ss` format.
+
+```html
+<wd-datetime-picker-view type="time" v-model="value" label="Hour Minute Second" use-second />
+```
+```typescript
+const value = ref<string>('11:12:30')
+```
+
+## Datetime Type (with Seconds)
+
+`datetime` type with `use-second` property displays year, month, day, hour, minute and second, the binding value is timestamp.
+
+```html
+<wd-datetime-picker-view type="datetime" v-model="value" label="Year Month Day Hour Minute Second" use-second />
+```
+```typescript
+const value = ref<number>(Date.now())
+```
+
 ## Modify Internal Format
 
 Pass a function to the `formatter` property, which receives `type` and `value` values and returns the display text content. `type` can be `year`, `month`, `date`, `hour`, `minute`, and `value` is of type `number`.
@@ -131,6 +153,7 @@ const filter = (type, values) => {
 | minMinute | Minimum minute, effective for time type | number | - | 0 | - |
 | maxMinute | Maximum minute, effective for time type | number | - | 59 | - |
 | immediate-change | Whether to trigger the picker-view's change event immediately when the finger is released. If not enabled, the change event will be triggered after the scrolling animation ends. Available from version 1.2.25, only supported on WeChat Mini Program and Alipay Mini Program. | boolean | - | false | 1.2.25 |
+| use-second | Whether to display the second selection, only effective for time and datetime types | boolean | - | false | $LOWEST_VERSION$ |
 
 ## Events
 

docs/en-US/component/datetime-picker.md

@@ -78,6 +78,28 @@ const value = ref<number>(Date.now())
 const value4 = ref<string>('09:20')
 ```
 
+## Time Type (with Seconds)
+
+`time` type with `use-second` property displays hour, minute and second, the binding value is in `HH:mm:ss` format.
+
+```html
+<wd-datetime-picker type="time" v-model="value" label="Hour Minute Second" use-second />
+```
+```typescript
+const value = ref<string>('09:20:30')
+```
+
+## Datetime Type (with Seconds)
+
+`datetime` type with `use-second` property displays year, month, day, hour, minute and second, the binding value is timestamp.
+
+```html
+<wd-datetime-picker type="datetime" v-model="value" label="Year Month Day Hour Minute Second" use-second />
+```
+```typescript
+const value = ref<number>(Date.now())
+```
+
 ## Modify Display Format
 
 Pass a function to the `display-format` property, which receives an array of all selected items and returns the display text content.
@@ -290,6 +312,7 @@ const displayFormatTabLabel = (items) => {
 | prop | Form field `model` field name, required when using form validation | string | - | - | - |
 | rules | Form validation rules, used with `wd-form` component | `FormItemRule []` | - | `[]` | - |
 | immediate-change | Whether to trigger the picker-view's change event immediately when the finger is released. If not enabled, the change event will be triggered after the scrolling animation ends. Available from version 1.2.25, only supported on WeChat Mini Program and Alipay Mini Program. | boolean | - | false | 1.2.25 |
+| use-second | Whether to display the second selection, only effective for time and datetime types | boolean | - | false | $LOWEST_VERSION$ |
 
 ### FormItemRule Data Structure
 

src/locale/en-US.json

@@ -969,6 +969,7 @@
   "ri-qi-xuan-ze-1": "Date selection",
   "ri-qi-xuan-ze-2": "Date selection",
   "ri-qi-xuan-ze-3": "Date selection",
+  "ri-qi-xuan-ze-dai-miao": "Date selection (with seconds)",
   "ri-zhou-yue-qie-huan": "Day Week Month Switching",
   "ring-lei-xing-loading": "Ring type loading",
   "ru-ding-dan-chu-yu-zan-ting-zhuang-tai-jin-ru-wo-de-ding-dan-ye-mian-zhao-dao-yao-qu-xiao-de-ding-dan-dian-ji-qu-xiao-ding-dan-an-niu-xuan-ze-ding-dan-qu-xiao-yuan-yin-hou-dian-ji-xia-yi-bu-ti-jiao-shen-qing-ji-ke": "If the order is in a suspended state, go to the \"My Orders\" page, find the order you want to cancel, and click the \"Cancel Order\" button; After selecting the reason for canceling the order, click \"Next\" to submit the application.",
@@ -1035,6 +1036,7 @@
   "shi-jian-fan-wei-yi-nian": "Time Range: One Year",
   "shi-jian-he-di-zhi": "Time and Address",
   "shi-jian-lei-xing": "TIME",
+  "shi-jian-xuan-ze-dai-miao": "Time selection (with seconds)",
   "shi-jiao-xiao-yan": "Out of focus verification",
   "shi-jiao-xiao-yan-0": "Out of focus verification",
   "shi-jing-shan-qu": "SHIJINGSHAN",

src/locale/zh-CN.json

@@ -969,6 +969,7 @@
   "ri-qi-xuan-ze-1": "日期选择",
   "ri-qi-xuan-ze-2": "日期选择",
   "ri-qi-xuan-ze-3": "日期选择",
+  "ri-qi-xuan-ze-dai-miao": "日期选择（带秒）",
   "ri-zhou-yue-qie-huan": "日周月切换",
   "ring-lei-xing-loading": "ring类型loading",
   "ru-ding-dan-chu-yu-zan-ting-zhuang-tai-jin-ru-wo-de-ding-dan-ye-mian-zhao-dao-yao-qu-xiao-de-ding-dan-dian-ji-qu-xiao-ding-dan-an-niu-xuan-ze-ding-dan-qu-xiao-yuan-yin-hou-dian-ji-xia-yi-bu-ti-jiao-shen-qing-ji-ke": "如订单处于暂停状态，进入“我的订单”页面，找到要取消的订单，点击“取消订单”按钮；选择订单取消原因后，点击“下一步”提交申请即可。",
@@ -1035,6 +1036,7 @@
   "shi-jian-fan-wei-yi-nian": "时间范围一年",
   "shi-jian-he-di-zhi": "时间和地址",
   "shi-jian-lei-xing": "时间类型",
+  "shi-jian-xuan-ze-dai-miao": "时间选择（带秒）",
   "shi-jiao-xiao-yan": "失焦校验",
   "shi-jiao-xiao-yan-0": "失焦校验",
   "shi-jing-shan-qu": "石景山区",

src/subPages/datetimePicker/Index.vue

@@ -4,10 +4,12 @@
     <demo-block transparent>
       <wd-cell-group border>
         <wd-datetime-picker :label="$t('ri-qi-xuan-ze')" v-model="value1" @confirm="handleConfirm1" />
+        <wd-datetime-picker :label="$t('ri-qi-xuan-ze-dai-miao')" use-second v-model="value18" />
         <wd-datetime-picker :label="$t('nian-yue-ri')" v-model="value2" type="date" @confirm="handleConfirm2" />
         <wd-datetime-picker :label="$t('nian-yue')" v-model="value3" type="year-month" @confirm="handleConfirm3" />
         <wd-datetime-picker :label="$t('nian')" v-model="value16" type="year" @confirm="handleConfirm16" />
         <wd-datetime-picker :label="$t('shi-fen')" v-model="value4" type="time" @confirm="handleConfirm4" />
+        <wd-datetime-picker :label="$t('shi-jian-xuan-ze-dai-miao')" v-model="value19" type="time" use-second />
         <wd-datetime-picker :label="$t('zhan-shi-ge-shi')" v-model="value5" :display-format="displayFormat" @confirm="handleConfirm5" />
         <wd-datetime-picker :label="$t('nei-bu-ge-shi')" v-model="value6" :formatter="formatter" @confirm="handleConfirm6" />
         <wd-datetime-picker :label="$t('guo-lv-xuan-xiang')" v-model="value7" :filter="filter" @confirm="handleConfirm7" />
@@ -34,7 +36,13 @@
       <wd-datetime-picker :label="$t('ri-qi-xuan-ze-1')" align-right v-model="value13" @confirm="handleConfirm13" />
     </demo-block>
     <demo-block :title="$t('qu-yu-xuan-ze')" transparent>
-      <wd-datetime-picker :label="$t('ri-qi-xuan-ze-2')" :title="$t('qing-xuan-ze-qu-jian')" v-model="value14" @confirm="handleConfirm14" />
+      <wd-datetime-picker
+        :label="$t('ri-qi-xuan-ze-2')"
+        :title="$t('qing-xuan-ze-qu-jian')"
+        v-model="value14"
+        use-second
+        @confirm="handleConfirm14"
+      />
     </demo-block>
     <demo-block :title="$t('fan-wei-tab-zhan-shi-ge-shi')" transparent>
       <wd-datetime-picker
@@ -76,7 +84,8 @@ const value14 = ref<any[]>(['', ''])
 const value15 = ref<any[]>(['', Date.now()])
 const value16 = ref(Date.now())
 const value17 = ref(Date.now())
-
+const value18 = ref(Date.now())
+const value19 = ref('09:20:26')
 const minDate = ref<number>(Date.now())
 const maxDate = ref<number>(new Date(new Date().getFullYear() + 1, new Date().getMonth(), new Date().getDate()).getTime())
 

src/subPages/datetimePickerView/Index.vue

@@ -5,6 +5,10 @@
       <wd-datetime-picker-view v-model="value1" @change="onChange1" />
     </demo-block>
 
+    <demo-block :title="$t('ri-qi-xuan-ze-dai-miao')" transparent>
+      <wd-datetime-picker-view v-model="value8" use-second />
+    </demo-block>
+
     <demo-block :title="$t('nian-yue-ri')" transparent>
       <wd-datetime-picker-view type="date" v-model="value2" @change="onChange2" />
     </demo-block>
@@ -21,6 +25,10 @@
       <wd-datetime-picker-view type="time" v-model="value4" @change="onChange4" />
     </demo-block>
 
+    <demo-block :title="$t('shi-jian-xuan-ze-dai-miao')" transparent>
+      <wd-datetime-picker-view type="time" v-model="value9" use-second @change="onChange4" />
+    </demo-block>
+
     <demo-block :title="$t('nei-bu-ge-shi')" transparent>
       <wd-datetime-picker-view v-model="value5" :formatter="formatter" @change="onChange5" />
     </demo-block>
@@ -44,6 +52,9 @@ const value4 = ref<string>('11:12')
 const value5 = ref<number>(Date.now())
 const value6 = ref<number>(Date.now())
 const value7 = ref<string>('')
+const value8 = ref<number>(Date.now())
+const value9 = ref<string>('11:12:13')
+
 const formatter: DatetimePickerViewFormatter = (type, value) => {
   switch (type) {
     case 'year':

src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss

@@ -84,6 +84,7 @@ $-fw-semibold: var(--wot-fw-semibold, 600) !default; // PingFangSC-Semibold
 
 /* 尺寸 */
 $-size-side-padding: var(--wot-size-side-padding, 15px) !default; // 屏幕两边留白
+$-size-side-padding-small: var(--wot-size-side-padding-small, 6px) !default; // 屏幕两边留白小值
 
 /*-------------------------------- Theme color application size.  end --------------------------------*/
 
@@ -438,7 +439,7 @@ $-picker-column-height: var(--wot-picker-column-height, 210px) !default; // 列
 $-picker-column-item-height: var(--wot-picker-column-item-height, 35px) !default; // 列高 滚筒外部的高度
 $-picker-column-select-bg: var(--wot-picker-column-select-bg, #f5f5f5) !default;
 $-picker-loading-button-color: var(--wot-picker-loading-button-color, rgba(0, 0, 0, 0.25)) !default; // loading 背景颜色
-$-picker-column-padding: var(--wot-picker-column-padding, 0 $-size-side-padding) !default; // 选项内间距
+$-picker-column-padding: var(--wot-picker-column-padding, 0 $-size-side-padding-small) !default; // 选项内间距
 
 $-picker-column-disabled-color: var(--wot-picker-column-disabled-color, rgba(0, 0, 0, 0.25)) !default; // 选择器选项禁用的颜色
 $-picker-mask: var(--wot-picker-mask, linear-gradient(180deg, hsla(0, 0%, 100%, 0.9), hsla(0, 0%, 100%, 0.25)))