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

 ## 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

 ## 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

 ## 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

 ## Form
 
+> New in 1.7.0+
+
 CubeForm is a schema-based form generator component.
 
 ### Example

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

 ## 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

 ## 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

 ## 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

 ## 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

 ## 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

 ## 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

 ## Switch
 
+> New in 1.4.0+
+
 Switch usually used to switch the state of on/off.
 
 ### Example

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

 ## 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

 ## 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

 ## 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

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

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

 ## 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

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

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

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

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

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

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

 ## Radio 单选框组
 
+> 1.4.0 新增
+
 单选框组，可设置单选框组内容，样式等。
 
 ### 示例

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

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

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

 ## 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

 ## 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

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

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

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

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

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

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

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

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

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

example/pages/date-picker.vue

@@ -5,7 +5,7 @@
         <cube-button @click="showDatePicker">Date Picker</cube-button>
         <cube-button @click="showTimePicker">Time Picker</cube-button>
         <cube-button @click="showDateTimePicker">Date Time Picker</cube-button>
-        <cube-button @click="showMonthDatePicker">Month Date Picker</cube-button>
+        <cube-button @click="showFormatPicker">Use format</cube-button>
         <cube-button @click="showUpdatePropsPicker">Use $updateProps</cube-button>
       </cube-button-group>
     </div>
@@ -62,21 +62,24 @@
 
         this.dateTimePicker.show()
       },
-      showMonthDatePicker() {
-        if (!this.monthDatePicker) {
-          this.monthDatePicker = this.$createDatePicker({
-            title: 'Month Date Picker',
-            min: [1, 1],
-            max: [12, 31],
+      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(),
-            startColumn: 'month',
-            columnCount: 2,
+            format: {
+              year: 'YY年',
+              month: 'MM月',
+              date: '第 D 日'
+            },
             onSelect: this.selectHandle,
             onCancel: this.cancelHandle
           })
         }
 
-        this.monthDatePicker.show()
+        this.formatPicker.show()
       },
       showUpdatePropsPicker() {
         if (!this.updatePropsPicker) {

src/common/lang/date.js

-export const DAY_TIMESTAMP = 60 * 60 * 24 * 1000
-export const HOUR_TIMESTAMP = 60 * 60 * 1000
-export const MINUTE_TIMESTAMP = 60 * 1000
-
-export function formatDate(date, fmt) {
-  const o = {
-    'M+': date.getMonth() + 1,
-    'd+': date.getDate(),
-    'h+': date.getHours(),
-    'm+': date.getMinutes(),
-    's+': date.getSeconds(),
-    'q+': Math.floor((date.getMonth() + 3) / 3),
-    'S': date.getMilliseconds()
+const DAY_TIMESTAMP = 60 * 60 * 24 * 1000
+const HOUR_TIMESTAMP = 60 * 60 * 1000
+const MINUTE_TIMESTAMP = 60 * 1000
+
+function formatType(type, format, value, attributes) {
+  const regExpMap = {
+    year: '(Y+)',
+    month: '(M+)',
+    date: '(D+)',
+    hour: '(h+)',
+    minute: '(m+)',
+    second: '(s+)',
+    quarter: '(q+)',
+    millisecond: '(S)'
   }
-  if (/(y+)/.test(fmt)) {
-    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
+
+  if (new RegExp(regExpMap[type], attributes).test(format)) {
+    const replaceStr = type === 'year'
+                       ? value.toString().substr(4 - RegExp.$1.length)
+                       : (RegExp.$1.length === 1) ? value : pad(value)
+    format = format.replace(RegExp.$1, replaceStr)
   }
-  for (const k in o) {
-    if (new RegExp('(' + k + ')').test(fmt)) {
-      fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
-    }
+
+  return format
+}
+
+function pad(value) {
+  return ('00' + value).substr(('' + value).length)
+}
+
+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()
+  }
+
+  for (const key in map) {
+    format = formatType(key, format, map[key])
   }
-  return fmt
+
+  return format
 }
 
-export function getZeroDate(date) {
+function getZeroDate(date) {
   const year = date.getFullYear()
   const month = date.getMonth() + 1
   const day = date.getDate()
   return new Date(year + '/' + month + '/' + day + ' 00:00:00')
 }
 
-export function getNow() {
+function getNow() {
   return window.performance && window.performance.now ? (window.performance.now() + window.performance.timing.navigationStart) : +new Date()
 }
+
+function computeNatureMaxDay(month, year) {
+  let natureMaxDay = 30
+  if ([1, 3, 5, 7, 8, 10, 12].indexOf(month) > -1) {
+    natureMaxDay = 31
+  } else {
+    if (month === 2) {
+      natureMaxDay = !year || (!(year % 400) || (!(year % 4) && year % 100)) ? 29 : 28
+    }
+  }
+
+  return natureMaxDay
+}
+
+export {
+  DAY_TIMESTAMP,
+  HOUR_TIMESTAMP,
+  MINUTE_TIMESTAMP,
+  pad,
+  formatType,
+  formatDate,
+  getZeroDate,
+  getNow,
+  computeNatureMaxDay
+}

src/components/date-picker/date-picker.vue

@@ -17,52 +17,46 @@
 <script>
   import apiMixin from '../../common/mixins/api'
   import pickerMixin from '../../common/mixins/picker'
+  import { deepAssign } from '../../common/helpers/util'
+  import { computeNatureMaxDay, formatType } from '../../common/lang/date'
 
   const COMPONENT_NAME = 'cube-date-picker'
   const EVENT_SELECT = 'select'
   const EVENT_CANCEL = 'cancel'
   const EVENT_CHANGE = 'change'
 
-  const UNIT_LIST = ['year', 'month', 'date', 'hour', 'minute', 'second']
-  const UNIT_RELATED_LIST = [
-    {
-      txt: '年',
-      pad: false
-    },
-    {
-      txt: '月',
+  const TYPE_LIST = ['year', 'month', 'date', 'hour', 'minute', 'second']
+  const NATURE_BOUNDARY_MAP = {
+    month: {
       natureMin: 1,
-      natureMax: 12,
-      pad: false
+      natureMax: 12
     },
-    {
-      txt: '日',
+    date: {
       natureMin: 1,
-      natureMax: 31,
-      pad: false
+      natureMax: 31
     },
-    {
-      txt: '时',
+    hour: {
       natureMin: 0,
-      natureMax: 23,
-      pad: false,
-      natureRange: range(0, 23, false, '时')
+      natureMax: 23
     },
-    {
-      txt: '分',
+    minute: {
       natureMin: 0,
-      natureMax: 59,
-      pad: true,
-      natureRange: range(0, 59, true, '分')
+      natureMax: 59
     },
-    {
-      txt: '秒',
+    second: {
       natureMin: 0,
-      natureMax: 59,
-      pad: true,
-      natureRange: range(0, 59, true, '秒')
+      natureMax: 59
     }
-  ]
+  }
+
+  const DEFAULT_FORMAT = {
+    year: 'YYYY',
+    month: 'M',
+    date: 'D',
+    hour: 'hh',
+    minute: 'mm',
+    second: 'ss'
+  }
 
   export default {
     name: COMPONENT_NAME,
@@ -90,6 +84,12 @@
         type: Number,
         default: 3
       },
+      format: {
+        type: Object,
+        default() {
+          return {}
+        }
+      },
       value: {
         type: [Date, Array],
         default() {
@@ -98,8 +98,27 @@
       }
     },
     computed: {
+      formatConfig() {
+        let formatConfig = Object.assign({}, DEFAULT_FORMAT)
+        deepAssign(formatConfig, this.format)
+
+        return formatConfig
+      },
+      natureRangeCache() {
+        const natureRangeCache = {
+          hour: [],
+          minute: [],
+          second: []
+        }
+
+        Object.keys(natureRangeCache).forEach((key) => {
+          natureRangeCache[key] = this._range(key, NATURE_BOUNDARY_MAP[key].natureMin, NATURE_BOUNDARY_MAP[key].natureMax)
+        })
+
+        return natureRangeCache
+      },
       startIndex() {
-        let startIndex = UNIT_LIST.indexOf(this.startColumn)
+        let startIndex = TYPE_LIST.indexOf(this.startColumn)
         return startIndex < 0 ? 0 : startIndex
       },
       minArray() {
@@ -157,19 +176,19 @@
       },
       _generateData(i, count, item) {
         if (count === 0) {
-          let min = i === 0 ? this.minArray[0] : Math.max(this.minArray[0], UNIT_RELATED_LIST[i].natureMin)
-          let max = i === 0 ? this.maxArray[0] : Math.min(this.maxArray[0], UNIT_RELATED_LIST[i].natureMax)
-          item.push(...range(min, max, UNIT_RELATED_LIST[i].pad, UNIT_RELATED_LIST[i].txt, true, true))
+          let min = i === 0 ? this.minArray[0] : Math.max(this.minArray[0], NATURE_BOUNDARY_MAP[TYPE_LIST[i]].natureMin)
+          let max = i === 0 ? this.maxArray[0] : Math.min(this.maxArray[0], NATURE_BOUNDARY_MAP[TYPE_LIST[i]].natureMax)
+          item.push(...this._range(TYPE_LIST[i], min, max, true, true))
         } else {
           if (i < 3 || item.isMin || item.isMax) {
-            let natureMax = i === 2 ? computeNatrueMaxDay(item.value, item.year) : UNIT_RELATED_LIST[i].natureMax
-            let min = item.isMin ? Math.max(this.minArray[count], UNIT_RELATED_LIST[i].natureMin) : UNIT_RELATED_LIST[i].natureMin
+            let natureMax = i === 2 ? computeNatureMaxDay(item.value, item.year) : NATURE_BOUNDARY_MAP[TYPE_LIST[i]].natureMax
+            let min = item.isMin ? Math.max(this.minArray[count], NATURE_BOUNDARY_MAP[TYPE_LIST[i]].natureMin) : NATURE_BOUNDARY_MAP[TYPE_LIST[i]].natureMin
             let max = item.isMax ? Math.min(this.maxArray[count], natureMax) : natureMax
 
             let storageYear = i === 1 && this.startIndex === 0 && this.columnCount >= 3 && item.value
-            item.children = range(min, max, UNIT_RELATED_LIST[i].pad, UNIT_RELATED_LIST[i].txt, item.isMin, item.isMax, storageYear)
+            item.children = this._range(TYPE_LIST[i], min, max, item.isMin, item.isMax, storageYear)
           } else {
-            item.children = UNIT_RELATED_LIST[i].natureRange
+            item.children = this.natureRangeCache[TYPE_LIST[i]]
           }
         }
         if (count < this.columnCount - 1 && i < 5) {
@@ -186,7 +205,7 @@
           if (i < this.startIndex) {
             args[i] = defaultDateArray[i]
           } else if (i >= this.startIndex + this.columnCount) {
-            args[i] = UNIT_RELATED_LIST[i].natureMin
+            args[i] = NATURE_BOUNDARY_MAP[TYPE_LIST[i]].natureMin
           } else {
             args[i] = selectedVal[i - this.startIndex]
           }
@@ -195,39 +214,24 @@
         args[1]--
 
         return new Date(...args)
-      }
-    }
-  }
-
-  function range(min, max, pad = false, unit = '', fatherIsMin, fatherIsMax, year) {
-    let arr = []
-    for (let i = min; i <= max; i++) {
-      const value = (pad && i < 10 ? '0' + i : i) + unit
-      const object = {
-        text: value,
-        value: i
-      }
-
-      if (fatherIsMin && i === min) object.isMin = true
-      if (fatherIsMax && i === max) object.isMax = true
-      if (year) object.year = year
+      },
+      _range(type, min, max, fatherIsMin, fatherIsMax, year) {
+        let arr = []
+        for (let i = min; i <= max; i++) {
+          const object = {
+            text: formatType(type, this.formatConfig[type], i, 'i'),
+            value: i
+          }
 
-      arr.push(object)
-    }
-    return arr
-  }
+          if (fatherIsMin && i === min) object.isMin = true
+          if (fatherIsMax && i === max) object.isMax = true
+          if (year) object.year = year
 
-  function computeNatrueMaxDay(month, year) {
-    let natureMaxDay = 30
-    if ([1, 3, 5, 7, 8, 10, 12].indexOf(month) > -1) {
-      natureMaxDay = 31
-    } else {
-      if (month === 2) {
-        natureMaxDay = !year || (!(year % 400) || (!(year % 4) && year % 100)) ? 29 : 28
+          arr.push(object)
+        }
+        return arr
       }
     }
-
-    return natureMaxDay
   }
 
   function dateToArray(date) {

test/unit/specs/date-picker.spec.js

@@ -33,22 +33,22 @@ describe('DatePicker', () => {
     expect(firstWheelItems.length)
       .to.equal(13)
     expect(firstWheelItems[1].textContent.trim())
-      .to.equal('2009年')
+      .to.equal('2009')
 
     const secondWheelItems = wheels[1].querySelectorAll('li')
     expect(secondWheelItems.length)
       .to.equal(5)
     expect(secondWheelItems[1].textContent.trim())
-      .to.equal('9月')
+      .to.equal('9')
 
     const thirdWheelItems = wheels[2].querySelectorAll('li')
     expect(thirdWheelItems.length)
       .to.equal(24)
     expect(thirdWheelItems[1].textContent.trim())
-      .to.equal('9日')
+      .to.equal('9')
   })
 
-  it('should correct when configured startColumn and columnCount', function (done) {
+  it('should render correct contents when configured startColumn and columnCount', function (done) {
     this.timeout(10000)
 
     vm = createDatePicker({
@@ -66,13 +66,13 @@ describe('DatePicker', () => {
     expect(firstWheelItems.length)
       .to.equal(31)
     expect(firstWheelItems[1].textContent.trim())
-      .to.equal('2日')
+      .to.equal('2')
 
     const secondWheelItems = wheels[1].querySelectorAll('li')
     expect(secondWheelItems.length)
       .to.equal(16)
     expect(secondWheelItems[1].textContent.trim())
-      .to.equal('9时')
+      .to.equal('09')
 
     // test: _arrayToDate if (i < this.beginIndex)
     vm.show()
@@ -83,6 +83,40 @@ describe('DatePicker', () => {
     }, 50)
   })
 
+  it('should render correct contents when configured format', function () {
+    vm = createDatePicker({
+      min: new Date(2008, 7, 8),
+      max: new Date(2020, 9, 20),
+      format: {
+        year: 'yy年',
+        month: 'MM月',
+        date: '第 d 日'
+      }
+    })
+
+    const wheels = vm.$el.querySelectorAll('.cube-picker-wheel-wrapper > div')
+    expect(wheels.length)
+      .to.equal(3)
+
+    const firstWheelItems = wheels[0].querySelectorAll('li')
+    expect(firstWheelItems.length)
+      .to.equal(13)
+    expect(firstWheelItems[1].textContent.trim())
+      .to.equal('09年')
+
+    const secondWheelItems = wheels[1].querySelectorAll('li')
+    expect(secondWheelItems.length)
+      .to.equal(5)
+    expect(secondWheelItems[1].textContent.trim())
+      .to.equal('09月')
+
+    const thirdWheelItems = wheels[2].querySelectorAll('li')
+    expect(thirdWheelItems.length)
+      .to.equal(24)
+    expect(thirdWheelItems[1].textContent.trim())
+      .to.equal('第 9 日')
+  })
+
   it('should trigger events', function (done) {
     this.timeout(10000)
 
@@ -174,7 +208,7 @@ describe('DatePicker', () => {
       const confirmBtn = vm.$el.querySelector('.cube-picker-choose [data-action="confirm"]')
       confirmBtn.click()
       expect(selectHandle)
-        .to.be.calledWith(new Date(2010, 9, 1), [2010, 10, 1], ['2010年', '10月', '1日'])
+        .to.be.calledWith(new Date(2010, 9, 1), [2010, 10, 1], ['2010', '10', '1'])
 
       done()
     }, 100)