feat(time-picker): format (didi#242)

* feat(time-picker): format didi#235
swvv · Jun 29, 2018 · a0d8c33 · a0d8c33
1 parent 0b18a0f
commit a0d8c33
Show file tree

Hide file tree

Showing 8 changed files with 205 additions and 60 deletions.
diff --git a/document/components/docs/en-US/date-picker.md b/document/components/docs/en-US/date-picker.md
@@ -257,8 +257,8 @@ __Notice:__ Cause this component used create-api, so you should read [create-api
 | month | the format of month, `M` don't pad 0，`MM` pad 0 | String | `M` | `MM月` |
 | date | the format of date, `D` don't pad 0，`DD` pad 0 | String | `D` | `第 D 日` |
 | hour | the format of hour, `h` don't pad 0，`hh` pad 0 | String | `hh` | `h点` |
-| month | the format of month, `m` don't pad 0，`mm` pad 0 | String | `mm` | `mm分` |
-| month | the format of month, `s` don't pad 0，`ss` pad 0 | String | `ss` | `ss秒` |
+| minute | the format of minute, `m` don't pad 0，`mm` pad 0 | String | `mm` | `mm分` |
+| second | the format of second, `s` don't pad 0，`ss` pad 0 | String | `ss` | `ss秒` |
 
 ### Events
 

diff --git a/document/components/docs/en-US/time-picker.md b/document/components/docs/en-US/time-picker.md
@@ -20,11 +20,11 @@ __Notice:__ Cause this component used create-api, so you should read [create-api
           showNow: true,
           minuteStep: 5,
           delay: 15,
-          onSelect: (selectedTime, selectedText) => {
+          onSelect: (selectedTime, selectedText, formatedTime) => {
             this.$createDialog({
               type: 'warn',
-              title: `selected timestamp ${selectedTime}`,
-              content: `selected content ${selectedText}`,
+              title: `selected time: ${selectedTime}`,
+              content: `selected text: ${selectedText}<br>format time: ${formatedTime}`,
               icon: 'cubeic-alert'
             }).show()
           },
@@ -62,14 +62,11 @@ __Notice:__ Cause this component used create-api, so you should read [create-api
             filter: ['Today', 'Tomorrow'],
             format: 'M year d day'
           },
-          onSelect(selectedTime, selectedText) {
-            console.log(selectedTime, selectedText)
-          },
-          onSelect: (selectedTime, selectedText) => {
+          onSelect: (selectedTime, selectedText, formatedTime) => {
             this.$createDialog({
               type: 'warn',
-              title: `selected timestamp ${selectedTime}`,
-              content: `selected content ${selectedText}`,
+              title: `selected time: ${selectedTime}`,
+              content: `selected text: ${selectedText}<br>format time: ${formatedTime}`,
               icon: 'cubeic-alert'
             }).show()
           },
@@ -92,6 +89,46 @@ __Notice:__ Cause this component used create-api, so you should read [create-api
 
   `format` attribute can set the text in `M year d day` format when the `len` is greater than the length of `filter` array.
 
+- Format
+
+  You can use property `format` to configure the format of `formatedTime`, an argument of event `select`.
+
+  ```html
+  <cube-button @click="showFormatPicker">Config format</cube-button>
+  ```
+
+  ```js
+  export default {
+    methods: {
+      showFormatPicker() {
+        if (!this.formatPicker) {
+          this.formatPicker = this.$createTimePicker({
+            format: 'hh:mm',
+            onSelect: this.selectHandler,
+            onCancel: this.cancelHandler
+          })
+        }
+        this.formatPicker.show()
+      },
+      selectHandler(selectedTime, selectedText, formatedTime) {
+        this.$createDialog({
+          type: 'warn',
+          title: `selected time: ${selectedTime}`,
+          content: `selected text: ${selectedText}<br>format time: ${formatedTime}`,
+          icon: 'cubeic-alert'
+        }).show()
+      },
+      cancelHandler() {
+        this.$createToast({
+          type: 'correct',
+          txt: 'Picker canceled',
+          time: 1000
+        }).show()
+      }
+    }
+  }
+  ```
+
 - Set time manually
 
   ```html
@@ -110,13 +147,13 @@ __Notice:__ Cause this component used create-api, so you should read [create-api
           day: {
             len: 5,
             filter: ['Today', 'Tomorrow', 'The day after tomorrow'],
-            format: 'M year d day'
+            format: 'M year D day'
           },
-          onSelect: (selectedTime, selectedText) => {
+          onSelect: (selectedTime, selectedText, formatedTime) => {
             this.$createDialog({
               type: 'warn',
-              title: `selected timestamp: ${selectedTime}`,
-              content: `selected content ${selectedText}`,
+              title: `selected time: ${selectedTime}`,
+              content: `selected text: ${selectedText}<br>format time: ${formatedTime}`,
               icon: 'cubeic-alert'
             }).show()
           },
@@ -153,7 +190,8 @@ __Notice:__ Cause this component used create-api, so you should read [create-api
 | confirmTxt<sup>1.8.1</sup> | the text of the confirm button | String | '确定' |
 | swipeTime | the duration of the momentum animation when user flicks the wheel of the picker, Unit: ms | Number | 2500 |
 | visible<sup>1.8.1</sup> | whether visible. Bind to `v-model` | Boolean | false |
-| maskClosable<sup>1.9.6</sup> | whether hide the component when clicked the mask layer | Boolean | true/false | true |
+| maskClosable<sup>1.9.6</sup> | whether hide the component when clicked the mask layer | Boolean | true |
+| format<sup>1.10.0</sup> | the format of formatedTime the third argument of select event | String | 'YYYY/M/D hh:mm' |
 
 * `day` sub configuration
 
@@ -171,11 +209,11 @@ __Notice:__ Cause this component used create-api, so you should read [create-api
 
 ### Events
 
-| Event Name | Description | Parameters 1 | Parameters 2 |
-| - | - | - | - |
-| select | triggers when clicking the confirm button | selectedTime: currently selected timestamp | selectText: text of currently selected time |
-| change | triggers when sliding to change time-picker roller | selectedTime: currently selected timestamp | selectText: text of currently selected time |
-| cancel | triggers when clicking the cancel button | - | - |
+| Event Name | Description | Parameters 1 | Parameters 2 | Parameters 3 |
+| - | - | - | - | - |
+| select | triggers when clicking the confirm button | selectedTime: currently selected timestamp | selectText: text of currently selected time | formatedTime<sup>1.10.0</sup> |
+| change | triggers when the roller scrolls | index: Number, index of current scrolling roller | selectedIndex: Number, index of selected item in current column | - |
+| cancel | triggers when clicking the cancel button | - | - | - |
 
 ### Instance methods
 

diff --git a/document/components/docs/zh-CN/date-picker.md b/document/components/docs/zh-CN/date-picker.md
@@ -257,8 +257,8 @@ __注：__ 由于此组件基于 create-api 实现，所以在使用之前，请
 | month | 月的格式，`M` 不补 0，`MM` 补 0 | String | `M` | `MM月` |
 | date | 日的格式，`D` 不补 0，`DD` 补 0 | String | `D` | `第 D 日` |
 | hour | 时的格式，`h` 不补 0，`hh` 补 0 | String | `hh` | `h点` |
-| month | 分的格式，`m` 不补 0，`mm` 补 0 | String | `mm` | `mm分` |
-| month | 秒的格式，`s` 不补 0，`ss` 补 0 | String | `ss` | `ss秒` |
+| minute | 分的格式，`m` 不补 0，`mm` 补 0 | String | `mm` | `mm分` |
+| second | 秒的格式，`s` 不补 0，`ss` 补 0 | String | `ss` | `ss秒` |
 
 ### 事件
 

diff --git a/document/components/docs/zh-CN/time-picker.md b/document/components/docs/zh-CN/time-picker.md
@@ -19,11 +19,11 @@ __注：__ 由于此组件基于 create-api 实现，所以在使用之前，请
           showNow: true,
           minuteStep: 5,
           delay: 15,
-          onSelect: (selectedTime, selectedText) => {
+          onSelect: (selectedTime, selectedText, formatedTime) => {
             this.$createDialog({
               type: 'warn',
-              title: `选中的时间戳是 ${selectedTime}`,
-              content: `选中的内容是 ${selectedText}`,
+              title: `selected time: ${selectedTime}`,
+              content: `selected text: ${selectedText}<br>format time: ${formatedTime}`,
               icon: 'cubeic-alert'
             }).show()
           },
@@ -42,6 +42,7 @@ __注：__ 由于此组件基于 create-api 实现，所以在使用之前，请
   `showNow` 用于控制是否显示“现在”时间，`minuteStep` 用于控制分钟的步长，`delay` 则表示的是当前时间向后推迟的时间，决定了最小可选时间。
 
 - 日期选项配置
+
   ```html
   <cube-button @click="showTimePicker">TimePicker - day options</cube-button>
   ```
@@ -59,11 +60,11 @@ __注：__ 由于此组件基于 create-api 实现，所以在使用之前，请
             filter: ['今天', '明天'],
             format: 'M月d日'
           },
-          onSelect: (selectedTime, selectedText) => {
+          onSelect: (selectedTime, selectedText, formatedTime) => {
             this.$createDialog({
               type: 'warn',
-              title: `选中的时间戳是 ${selectedTime}`,
-              content: `选中的内容是 ${selectedText}`,
+              title: `selected time: ${selectedTime}`,
+              content: `selected text: ${selectedText}<br>format time: ${formatedTime}`,
               icon: 'cubeic-alert'
             }).show()
           },
@@ -85,6 +86,46 @@ __注：__ 由于此组件基于 create-api 实现，所以在使用之前，请
 
   `format`属性用以格式化日期显示的方式，当`len`的数量大于`filter`的数组长度时，会以`M月d日`的格式显示文案。
 
+- Format 配置
+
+  通过 `format` 属性可配置 `select` 事件的 `formatedTime` 参数的格式。
+
+  ```html
+  <cube-button @click="showFormatPicker">Config format</cube-button>
+  ```
+
+  ```js
+  export default {
+    methods: {
+      showFormatPicker() {
+        if (!this.formatPicker) {
+          this.formatPicker = this.$createTimePicker({
+            format: 'hh:mm',
+            onSelect: this.selectHandler,
+            onCancel: this.cancelHandler
+          })
+        }
+        this.formatPicker.show()
+      },
+      selectHandler(selectedTime, selectedText, formatedTime) {
+        this.$createDialog({
+          type: 'warn',
+          title: `selected time: ${selectedTime}`,
+          content: `selected text: ${selectedText}<br>format time: ${formatedTime}`,
+          icon: 'cubeic-alert'
+        }).show()
+      },
+      cancelHandler() {
+        this.$createToast({
+          type: 'correct',
+          txt: 'Picker canceled',
+          time: 1000
+        }).show()
+      }
+    }
+  }
+  ```
+
 - 手动设置时间
   ```html
   <cube-button @click="showTimePicker">TimePicker - setTime(next hour)</cube-button>
@@ -102,13 +143,13 @@ __注：__ 由于此组件基于 create-api 实现，所以在使用之前，请
           day: {
             len: 5,
             filter: ['今天', '明天', '后天'],
-            format: 'M月d日'
+            format: 'M月D日'
           },
-          onSelect: (selectedTime, selectedText) => {
+          onSelect: (selectedTime, selectedText, formatedTime) => {
             this.$createDialog({
               type: 'warn',
-              title: `选中的时间戳是 ${selectedTime}`,
-              content: `选中的内容是 ${selectedText}`,
+              title: `selected time: ${selectedTime}`,
+              content: `selected text: ${selectedText}<br>format time: ${formatedTime}`,
               icon: 'cubeic-alert'
             }).show()
           },
@@ -143,7 +184,8 @@ __注：__ 由于此组件基于 create-api 实现，所以在使用之前，请
 | confirmTxt<sup>1.8.1</sup> | 确定按钮文案 | String | '确定' |
 | swipeTime | 快速滑动选择器滚轮时，惯性滚动动画的时长，单位：ms | Number | 2500 |
 | visible<sup>1.8.1</sup> | 显示状态，是否可见。`v-model`绑定值 | Boolean | false |
-| maskClosable<sup>1.9.6</sup> | 点击蒙层是否隐藏 | Boolean | true/false | true |
+| maskClosable<sup>1.9.6</sup> | 点击蒙层是否隐藏 | Boolean | true |
+| format<sup>1.10.0</sup> | select 事件参数 formatedTime 的格式 | String | 'YYYY/M/D hh:mm' |
 
 * `day` 子配置项
 
@@ -161,11 +203,11 @@ __注：__ 由于此组件基于 create-api 实现，所以在使用之前，请
 
 ### 事件
 
-| 事件名 | 说明 | 参数1 | 参数2 |
-| - | - | - | - |
-| select | 点击确认按钮触发此事件 | selectedTime: 当前选中的timestamp | selectText: 当前选中的时间文案 |
-| change | 滑动改变time-picker滚轴时触发此事件 | selectedTime: 当前选中的timestamp | selectText: 当前选中的时间文案 |
-| cancel | 点击取消按钮触发此事件 | - | - |
+| 事件名 | 说明 | 参数1 | 参数2 | 参数3 |
+| - | - | - | - | - |
+| select | 点击确认按钮触发此事件 | selectedTime: 当前选中的timestamp | selectText: 当前选中的时间文案 | formatedTime: 格式化日期<sup>1.10.0</sup> |
+| change | 滚轴滚动后触发此事件 | index: 当前滚动列次序，Number类型 | selectedIndex: 当前列选中项的索引，Number类型 | - |
+| cancel | 点击取消按钮触发此事件 | - | - | - |
 
 ### 实例方法
 

diff --git a/example/pages/time-picker.vue b/example/pages/time-picker.vue
@@ -4,6 +4,7 @@
       <cube-button-group>
         <cube-button @click="showTimePicker">TimePicker</cube-button>
         <cube-button @click="showConfigDayPicker">Config day options</cube-button>
+        <cube-button @click="showFormatPicker">Config format</cube-button>
         <cube-button @click="showSetTimePiker">Use setTime</cube-button>
       </cube-button-group>
     </div>
@@ -44,6 +45,16 @@
         }
         this.configDayPicker.show()
       },
+      showFormatPicker() {
+        if (!this.formatPicker) {
+          this.formatPicker = this.$createTimePicker({
+            format: 'hh:mm',
+            onSelect: this.selectHandler,
+            onCancel: this.cancelHandler
+          })
+        }
+        this.formatPicker.show()
+      },
       showSetTimePiker() {
         if (!this.setTimePiker) {
           this.setTimePiker = this.$createTimePicker({
@@ -56,11 +67,11 @@
         this.setTimePiker.setTime(time)
         this.setTimePiker.show()
       },
-      selectHandler(selectedTime, selectedText) {
+      selectHandler(selectedTime, selectedText, formatedTime) {
         this.$createDialog({
           type: 'warn',
-          title: `选中的时间戳是 ${selectedTime}`,
-          content: `选中的内容是 ${selectedText}`,
+          title: `selected time: ${selectedTime}`,
+          content: `selected text: ${selectedText}<br>format time: ${formatedTime}`,
           icon: 'cubeic-alert'
         }).show()
       },

diff --git a/src/common/lang/date.js b/src/common/lang/date.js
@@ -28,20 +28,40 @@ function pad(value) {
   return ('00' + value).substr(('' + value).length)
 }
 
-function formatDate(date, format, regExpAttributes) {
+function formatDate(date, format) {
   const map = {
-    year: date.getFullYear(),
-    month: date.getMonth() + 1,
-    date: date.getDate(),
-    hour: date.getHours(),
-    minute: date.getMinutes(),
-    second: date.getSeconds(),
-    quarter: Math.floor((date.getMonth() + 3) / 3),
-    millisecond: date.getMilliseconds()
+    year: {
+      value: date.getFullYear(),
+      regExpAttributes: 'i'
+    },
+    month: {
+      value: date.getMonth() + 1
+    },
+    date: {
+      value: date.getDate(),
+      regExpAttributes: 'i'
+    },
+    hour: {
+      value: date.getHours(),
+      regExpAttributes: 'i'
+    },
+    minute: {
+      value: date.getMinutes()
+    },
+    second: {
+      value: date.getSeconds()
+    },
+    quarter: {
+      value: Math.floor((date.getMonth() + 3) / 3),
+      regExpAttributes: 'i'
+    },
+    millisecond: {
+      value: date.getMilliseconds()
+    }
   }
 
   for (const key in map) {
-    format = formatType(key, format, map[key], regExpAttributes)
+    format = formatType(key, format, map[key].value, map[key].regExpAttributes)
   }
 
   return format