From f0e38b2720985a1cf190fb173c2eace51f7963c7 Mon Sep 17 00:00:00 2001 From: rex Date: Wed, 24 Apr 2019 01:24:10 +0800 Subject: [PATCH] [new feature] DatetimePicker: add new prop formatter & add new external classes fix #1526 --- example/pages/datetime-picker/index.js | 10 +++++- example/pages/datetime-picker/index.wxml | 1 + packages/datetime-picker/README.md | 24 ++++++++++++-- packages/datetime-picker/index.ts | 41 +++++++++++++++++------- packages/datetime-picker/index.wxml | 3 ++ packages/picker-column/index.less | 2 +- 6 files changed, 64 insertions(+), 17 deletions(-) diff --git a/example/pages/datetime-picker/index.js b/example/pages/datetime-picker/index.js index 5578e8a29..1fe8281e2 100644 --- a/example/pages/datetime-picker/index.js +++ b/example/pages/datetime-picker/index.js @@ -11,7 +11,15 @@ Page({ currentDate2: null, currentDate3: new Date(2018, 0, 1), currentDate4: '12:00', - loading: false + loading: false, + formatter(type, value) { + if (type === 'year') { + return `${value}年`; + } else if (type === 'month') { + return `${value}月`; + } + return value; + } }, onInput(event) { diff --git a/example/pages/datetime-picker/index.wxml b/example/pages/datetime-picker/index.wxml index ed06067f4..570ede148 100644 --- a/example/pages/datetime-picker/index.wxml +++ b/example/pages/datetime-picker/index.wxml @@ -16,6 +16,7 @@ value="{{ currentDate2 }}" min-date="{{ minDate }}" bind:input="onInput" + formatter="{{ formatter }}" /> diff --git a/packages/datetime-picker/README.md b/packages/datetime-picker/README.md index d53fe0f5b..52a491fd7 100644 --- a/packages/datetime-picker/README.md +++ b/packages/datetime-picker/README.md @@ -54,14 +54,15 @@ Page({ #### 选择日期（年月日） -`value` 为时间戳 +`value` 为时间戳，通过传入 `formatter` 函数对选项文字进行处理 ```html ``` @@ -69,7 +70,15 @@ Page({ Page({ data: { currentDate: new Date().getTime(), - minDate: new Date().getTime() + minDate: new Date().getTime(), + formatter(type, value) { + if (type === 'year') { + return `${value}年`; + } else if (type === 'month') { + return `${value}月`; + } + return value; + } }, onInput(event) { @@ -150,6 +159,7 @@ Page({ | max-hour | 可选的最大小时，针对 time 类型 | `Number` | `23` | | min-minute | 可选的最小分钟，针对 time 类型 | `Number` | `0` | | max-minute | 可选的最大分钟，针对 time 类型 | `Number` | `59` | +| formatter | 选项格式化函数 | `(type, value) => value` | - | | title | 顶部栏标题 | `String` | `''` | | show-toolbar | 是否显示顶部栏 | `Boolean` | `false` | | loading | 是否显示加载状态 | `Boolean` | `false` | @@ -179,3 +189,11 @@ Page({ | setColumnValues(index, values) | 设置对应列中所有的备选值 | | getValues() | 获取所有列中被选中的值，返回一个数组 | | setValues(values) | `values`为一个数组，设置所有列中被选中的值 | + +### 外部样式类 + +| 类名 | 说明 | +|-----------|-----------| +| active-class | 选中项样式类 | +| toolbar-class | 顶部栏样式类 | +| column-class | 列样式类 | diff --git a/packages/datetime-picker/index.ts b/packages/datetime-picker/index.ts index 16cfe58de..ae2592a37 100644 --- a/packages/datetime-picker/index.ts +++ b/packages/datetime-picker/index.ts @@ -38,9 +38,17 @@ function getMonthEndDay(year: number, month: number): number { return 32 - new Date(year, month - 1, 32).getDate(); } +const defaultFormatter = (_, value) => value; + VantComponent({ + classes: ['active-class', 'toolbar-class', 'column-class'], + props: { ...pickerProps, + formatter: { + type: Function, + value: defaultFormatter + }, value: null, type: { type: String, @@ -102,7 +110,9 @@ VantComponent({ methods: { getPicker() { if (this.picker == null) { - const picker = this.picker = this.selectComponent('.van-datetime-picker'); + const picker = (this.picker = this.selectComponent( + '.van-datetime-picker' + )); const { setColumnValues } = picker; picker.setColumnValues = (...args: any) => setColumnValues.apply(picker, [...args, false]); @@ -111,11 +121,12 @@ VantComponent({ }, updateColumns() { + const { formatter = defaultFormatter } = this.data; const results = this.getRanges().map(({ type, range }, index) => { const values = times(range[1] - range[0] + 1, index => { let value = range[0] + index; value = type === 'year' ? `${value}` : padZero(value); - return value; + return formatter(type, value); }); return { values }; @@ -292,23 +303,29 @@ VantComponent({ updateColumnValue(value) { let values = []; - const { data } = this; + const { type, formatter = defaultFormatter } = this.data; const picker = this.getPicker(); - if (data.type === 'time') { + if (type === 'time') { const pair = value.split(':'); - values = [pair[0], pair[1]]; + values = [ + formatter('hour', pair[0]), + formatter('minute', pair[1]) + ]; } else { const date = new Date(value); - values = [`${date.getFullYear()}`, padZero(date.getMonth() + 1)]; - if (data.type === 'date') { - values.push(padZero(date.getDate())); + values = [ + formatter('year', `${date.getFullYear()}`), + formatter('month', padZero(date.getMonth() + 1)) + ]; + if (type === 'date') { + values.push(formatter('day', padZero(date.getDate()))); } - if (data.type === 'datetime') { + if (type === 'datetime') { values.push( - padZero(date.getDate()), - padZero(date.getHours()), - padZero(date.getMinutes()) + formatter('day', padZero(date.getDate())), + formatter('hour', padZero(date.getHours())), + formatter('minute', padZero(date.getMinutes())) ); } } diff --git a/packages/datetime-picker/index.wxml b/packages/datetime-picker/index.wxml index 13a1b478b..ade22024e 100644 --- a/packages/datetime-picker/index.wxml +++ b/packages/datetime-picker/index.wxml @@ -1,5 +1,8 @@