feat(date-picker): support format config

* feat(date-picker): format config

* feat(date-picker): format config

* fix(date-picker): cache

* refactor: util func

* optimise: variable name

* test

* docs: format

* docs: add version

* optimize

* feat: format ignore case

* docs: add version sup

* test

* style: sup

document/common/stylus/md.styl

@@ -125,3 +125,10 @@ a
   color:#3CA0E6
   &:hover
     color: #137DC6
+sup
+  position: absolute
+  margin: -12px 0 0 -4px
+  padding: 2px
+  transform: scale(0.6) translateZ(0)
+  border: 1px solid #ccc
+  border-radius: 4px

document/components/docs/en-US/cascade-picker.md

@@ -1,5 +1,7 @@
 ## CascadePicker
 
+> New in 1.2.0+
+
 `CascadePicker` component is used to implement the cascading change between picker columns. What is the effect of cascade? Considering the usage of province-city-area picker, when the province is changed, you may want the city column to display the exact cities of current province, so does the area column. And the `CascadePicker` is here to help you handle this.
 
 __Notice:__ Cause this component used create-api, so you should read [create-api](#/en-US/docs/create-api) first.

document/components/docs/en-US/date-picker.md

@@ -1,5 +1,7 @@
 ## DatePicker
 
+> New in 1.7.0+
+
 DatePicker can be used to choose date, which has flexible configuration for time granularity, such as year - month - date, hour - minute - second, year - month - date - hour - minute - second, year - month, etc.
 
 __Notice:__ Cause this component used create-api, so you should read [create-api](#/en-US/docs/create-api) first.
@@ -134,6 +136,53 @@ __Notice:__ Cause this component used create-api, so you should read [create-api
   }
   ```
 
+- Format
+
+  You can also configure the date format by the property `format`.
+
+  ```html
+  <cube-button @click="showFormatPicker">Use format</cube-button>
+  ```
+  ```js
+  export default {
+    methods: {
+      showFormatPicker() {
+        if (!this.formatPicker) {
+          this.formatPicker = this.$createDatePicker({
+            title: 'Use format',
+            min: new Date(2008, 7, 8),
+            max: new Date(2020, 9, 20),
+            value: new Date(),
+            format: {
+              year: 'YY年',
+              month: 'MM月',
+              date: '第 D 日'
+            },
+            onSelect: this.selectHandle,
+            onCancel: this.cancelHandle
+          })
+        }
+
+        this.formatPicker.show()
+      },
+      selectHandle(date, selectedVal, selectedText) {
+        this.$createDialog({
+          type: 'warn',
+          content: `Selected Item: <br/> - date: ${date} <br/> - value: ${selectedVal.join(', ')} <br/> - text: ${selectedText.join(' ')}`,
+          icon: 'cubeic-alert'
+        }).show()
+      },
+      cancelHandle() {
+        this.$createToast({
+          type: 'correct',
+          txt: 'Picker canceled',
+          time: 1000
+        }).show()
+      }
+    }
+  }
+  ```
+
 - `$updateProps`
 
   With the `$updateProps` method, you can modify the properties of component instances created by createAPI. For example, in `DatePicker`, we can modify the value of `value` attribute to change the date currently selected.
@@ -191,12 +240,24 @@ __Notice:__ Cause this component used create-api, so you should read [create-api
 | value | current selected Date | Date, Array | - | the minimum value of optional range | new Date() |
 | startColumn | the start column | String | year/month/date/hour/minute/second| year | hour |
 | columnCount | the count of column | Number | - | 3 | 6 |
-| title | 标题 | String | - | '' | - |
+| format<sup>1.8.0+</sup> | date format | Object | - | { year: 'YYYY', month: 'M', date: 'D', hour: 'hh', minute: 'mm', second: 'ss' } | { year: 'YY年', month: 'MM月', date: '第 D 日' } |
+| title | title | String | - | '' | - |
 | cancelTxt | the text of the cancel button | String | - | '取消' | - |
 | confirmTxt | 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 | - |
 | alias | configure the alias of `value` and `text` | Object | - | {} | { value: 'id', text: 'name'} |
 
+* `format` sub configuration
+
+| Attribute | Description | Type  | Default | Example |
+| - | - | - | - | - |
+| year | the format of year, `YYYY` represent full year，`YY` only last two digit of year | String | `YYYY` | `YY年` |
+| 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秒` |
+
 ### Events
 
 | Event Name | Description | Parameters 1 | Parameters 2 | Parameters 3 |

document/components/docs/en-US/drawer.md

@@ -1,5 +1,7 @@
 ## Drawer
 
+> New in 1.7.0+
+
 Drawer, this component is used to select item in many items, it used full-page panels to interaction normally.
 
 __Notice:__ Drawer component's container element should be be a relative or absolute position element.

document/components/docs/en-US/form.md

@@ -1,5 +1,7 @@
 ## Form
 
+> New in 1.7.0+
+
 CubeForm is a schema-based form generator component.
 
 ### Example

document/components/docs/en-US/input.md

@@ -1,5 +1,7 @@
 ## Input
 
+> New in 1.5.0+
+
 Input component. You can use the `v-model` directive to create two-way data bindings and use a clear button to clear the content.
 
 ### Example

document/components/docs/en-US/radio.md

@@ -1,5 +1,7 @@
 ## Radio
 
+> New in 1.4.0+
+
 Radio component. You could set the options and the position of the radio's icon.
 
 ### Example

document/components/docs/en-US/rate.md

@@ -1,6 +1,8 @@
 ## Rate
 
-  Rate component. You can customize the rating star numbers, and disable the interaction, you can also customize the style of star through the slot.
+> New in 1.5.0+
+
+Rate component. You can customize the rating star numbers, and disable the interaction, you can also customize the style of star through the slot.
 
 ### Example
 

document/components/docs/en-US/segment-picker.md

@@ -1,5 +1,7 @@
 ## SegmentPicker
 
+> New in 1.7.0+
+
 SegmentPicker is used to achieve multi segment choose, for example, the choose of time period: September 1, 2010 - 2014 June 30th.
 
 __Notice:__ Cause this component used create-api, so you should read [create-api](#/en-US/docs/create-api) first.

document/components/docs/en-US/select.md

@@ -1,5 +1,7 @@
 ## Select
 
+> New in 1.5.0+
+
 Select component.
 
 __Notice:__ Cause this component depend on Picker component, and Picker used create-api, so you should read [create-api](#/en-US/docs/create-api) first.

document/components/docs/en-US/swipe.md

@@ -1,5 +1,7 @@
 ## Swipe
 
+> New in 1.5.0+
+
 The Swipe component, which provides a WeChat list left slip function, makes it easy to do some functional operations on the list items.
 
 ### Example

document/components/docs/en-US/switch.md

@@ -1,5 +1,7 @@
 ## Switch
 
+> New in 1.4.0+
+
 Switch usually used to switch the state of on/off.
 
 ### Example

document/components/docs/en-US/textarea.md

@@ -1,5 +1,7 @@
 ## Textarea
 
+> New in 1.5.0+
+
 Multi-line input box components. You can use the `v-model` directive to create two-way data bindings. The component expands or fold according to whether there is content, whether it is focused.
 
 ### Example

document/components/docs/en-US/upload.md

@@ -1,5 +1,7 @@
 ## Upload
 
+> New in 1.3.0+
+
 `Upload` component.
 
 **Notice:** In this document, all the original File will be called **original file**, since the wrapped file object will be called **file object**. The structure of **file object** show as following:

document/components/docs/en-US/validator.md

@@ -1,5 +1,7 @@
 ## Validator
 
+> New in 1.5.0+
+
 Validator is used to validate form data and corresponding warning message.
 
 ### Example

document/components/docs/zh-CN/cascade-picker.md

@@ -1,5 +1,7 @@
 ## CascadePicker组件
 
+> 1.2.0 新增
+
 `CascadePicker`组件是级联选择器，用于实现多列选择之间的级联变化。比如，在选择省市区时，当省切换到了江苏省，城市列应该变成江苏省的各个城市，同理，如果城市切换到苏州市，区列的选项也应变成苏州市的各个区，这就级联的意义。
 
 __注：__ 由于此组件基于 create-api 实现，所以在使用之前，请确保自己了解过 [create-api](#/zh-CN/docs/create-api)。

document/components/docs/zh-CN/date-picker.md

@@ -1,5 +1,7 @@
 ## DatePicker 组件
 
+> 1.7.0 新增
+
 日期选择器，可用于日期选择，选择粒度的灵活配置，如年月日、时分秒、年月日时分秒、年月等。
 
 __注：__ 由于此组件基于 create-api 实现，所以在使用之前，请确保自己了解过 [create-api](#/zh-CN/docs/create-api)。
@@ -134,6 +136,53 @@ __注：__ 由于此组件基于 create-api 实现，所以在使用之前，请
   }
   ```
 
+- 日期格式
+
+  你还可以通过 `format` 属性配置日期格式。
+
+  ```html
+  <cube-button @click="showFormatPicker">Use format</cube-button>
+  ```
+  ```js
+  export default {
+    methods: {
+      showFormatPicker() {
+        if (!this.formatPicker) {
+          this.formatPicker = this.$createDatePicker({
+            title: 'Use format',
+            min: new Date(2008, 7, 8),
+            max: new Date(2020, 9, 20),
+            value: new Date(),
+            format: {
+              year: 'YY年',
+              month: 'MM月',
+              date: '第 D 日'
+            },
+            onSelect: this.selectHandle,
+            onCancel: this.cancelHandle
+          })
+        }
+
+        this.formatPicker.show()
+      },
+      selectHandle(date, selectedVal, selectedText) {
+        this.$createDialog({
+          type: 'warn',
+          content: `Selected Item: <br/> - date: ${date} <br/> - value: ${selectedVal.join(', ')} <br/> - text: ${selectedText.join(' ')}`,
+          icon: 'cubeic-alert'
+        }).show()
+      },
+      cancelHandle() {
+        this.$createToast({
+          type: 'correct',
+          txt: 'Picker canceled',
+          time: 1000
+        }).show()
+      }
+    }
+  }
+  ```
+
 - `$updateProps`
 
   通过`$updateProps`方法，可以修改用 createAPI 创建的组件实例的属性。比如 `DatePicker`中，我们可以修改 `value` 属性的值改变当前选择的日期。
@@ -191,12 +240,24 @@ __注：__ 由于此组件基于 create-api 实现，所以在使用之前，请
 | value | 当前选择的日期 | Date, Array | - | 可选范围的最小值 | new Date() |
 | startColumn | 起始列 | String | year/month/date/hour/minute/second| year | hour |
 | columnCount | 列数 | Number | - | 3 | 6 |
+| format<sup>1.8.0+</sup> | 日期格式 | Object | - | { year: 'YYYY', month: 'M', date: 'D', hour: 'hh', minute: 'mm', second: 'ss' } | { year: 'YY年', month: 'MM月', date: '第 D 日' } |
 | title | 标题 | String | - | '' | - |
 | cancelTxt | 取消按钮文案 | String | - | '取消' | - |
 | confirmTxt | 确定按钮文案 | String | - | '确定' | - |
 | swipeTime | 快速滑动选择器滚轮时，惯性滚动动画的时长，单位：ms | Number | - | 2500 | - |
 | alias | 配置`value`和`text`的别名，用法同`Picker`组件 | Object | - | {} | { value: 'id', text: 'name'} |
 
+* `format` 子配置项
+
+| 参数 | 说明 | 类型 | 默认值 | 示例 |
+| - | - | - | - | - |
+| year | 年的格式，`YYYY` 代表完整年份，`YY` 仅年份后两位 | String | `YYYY` | `YY年` |
+| 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秒` |
+
 ### 事件
 
 | 事件名 | 说明 | 参数1 | 参数2 | 参数3 |

document/components/docs/zh-CN/drawer.md

@@ -1,5 +1,7 @@
 ## Drawer
 
+> 1.7.0 新增
+
 抽屉，主要用来需要大范围层级进行选择的场景，一般情况下应该是满屏状态。
 
 __注：__ 组件依赖父容器相对定位或者绝对定位，因为 Drawer 是绝对定位的。

document/components/docs/zh-CN/form.md

@@ -1,5 +1,7 @@
 ## Form
 
+> 1.7.0 新增
+
 表单，包含各种输入组件以及对应的校验；我们可以通过数据驱动的方式来生成完成表单。
 
 ### 示例

document/components/docs/zh-CN/input.md

@@ -1,5 +1,7 @@
 ## Input
 
+> 1.5.0 新增
+
 输入框组件。支持使用`v-model`对数据双向绑定，支持一键清空内容。
 
 ### 示例

document/components/docs/zh-CN/radio.md

@@ -1,5 +1,7 @@
 ## Radio 单选框组
 
+> 1.4.0 新增
+
 单选框组，可设置单选框组内容，样式等。
 
 ### 示例

document/components/docs/zh-CN/rate.md

@@ -1,6 +1,8 @@
 ## Rate
 
-  评分组件。你可以自定义星星个数，可以禁用交互，以用作评价展示，可以通过插槽自定义星星样式。
+> 1.5.0 新增
+
+评分组件。你可以自定义星星个数，可以禁用交互，以用作评价展示，可以通过插槽自定义星星样式。
 
 ### 示例
 

document/components/docs/zh-CN/segment-picker.md

@@ -1,5 +1,7 @@
 ## SegmentPicker 组件
 
+> 1.7.0 新增
+
 段选择器，用于实现多段的选择，比如选择时间段：2010年9月1日 - 2014年6月30日。
 
 __注：__ 由于此组件基于 create-api 实现，所以在使用之前，请确保自己了解过 [create-api](#/zh-CN/docs/create-api)。

document/components/docs/zh-CN/select.md

@@ -1,5 +1,7 @@
 ## Select
 
+> 1.5.0 新增
+
 Select 组件，用于单项选择。
 
 __注：__ 由于此组件依赖 [Picker](#/zh-CN/docs/picker) 组件，而 Picker 组件是基于 create-api 实现，所以在使用之前，请确保自己了解过 [create-api](#/zh-CN/docs/create-api)。

document/components/docs/zh-CN/swipe.md

@@ -1,5 +1,7 @@
 ## Swipe 滑块组件
 
+> 1.5.0 新增
+
 滑块组件，提供类似微信列表左滑功能，可以方便地对列表项做一些功能操作。
 
 ### 示例

document/components/docs/zh-CN/switch.md

@@ -1,5 +1,7 @@
 ## Switch 滑动开关
 
+> 1.4.0 新增
+
 滑动开关，用于切换 on/off 状态。
 
 ### 示例

document/components/docs/zh-CN/textarea.md

@@ -1,5 +1,7 @@
 ## Textarea
 
+> 1.5.0 新增
+
 多行输入框组件，支持使用`v-model`对数据双向绑定，根据是否有内容、是否聚焦有折叠、展开两种状态。
 
 ### 示例

document/components/docs/zh-CN/upload.md

@@ -1,5 +1,7 @@
 ## Upload 组件
 
+> 1.3.0 新增
+
 `Upload` 上传组件。
 
 **注：** 本文中所有的原始文件对象统称为**原始文件**，而经过包装后的文件对象称为**文件对象**，这个文件对象的结构如下：

document/components/docs/zh-CN/validator.md

@@ -1,5 +1,7 @@
 ## Vadidator
 
+> 1.5.0 新增
+
 校验器，用于对表单进行验证，并提示相应的错误信息。
 
 ### 示例