Skip to content

Commit fd11912

Browse files
tangjinzhoutangjinzhou
committed
add datepicker support v-model
1 parent 08ba0c9 commit fd11912

File tree

7 files changed

+34
-21
lines changed

7 files changed

+34
-21
lines changed

‎components/date-picker/RangePicker.jsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,10 @@ export default {
6363
allowClear: true,
6464
showToday: false,
6565
}),
66-
66+
model: {
67+
prop: 'value',
68+
event: 'change',
69+
},
6770
data () {
6871
const value = this.value || this.defaultValue || []
6972
if (

‎components/date-picker/WeekPicker.jsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,10 @@ export default {
2626
}),
2727
name: 'AWeekPicker',
2828
mixins: [BaseMixin],
29+
model: {
30+
prop: 'value',
31+
event: 'change',
32+
},
2933
data () {
3034
const value = this.value || this.defaultValue
3135
if (value && !interopDefault(moment).isMoment(value)) {

‎components/date-picker/createPicker.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,10 @@ export default function createPicker (TheCalendar, props) {
2828
showToday: true,
2929
}),
3030
mixins: [BaseMixin],
31+
model: {
32+
prop: 'value',
33+
event: 'change',
34+
},
3135
data () {
3236
const value = this.value || this.defaultValue
3337
if (value && !interopDefault(moment).isMoment(value)) {

‎components/date-picker/demo/start-end.md

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -20,18 +20,16 @@ When `RangePicker` does not satisfied your requirements, try to implement simila
2020
:disabledDate="disabledStartDate"
2121
showTime
2222
format="YYYY-MM-DD HH:mm:ss"
23-
:value="startValue"
23+
v-model="startValue"
2424
placeholder="Start"
25-
@change="onStartChange"
2625
@openChange="handleStartOpenChange"
2726
/>
2827
<a-date-picker
2928
:disabledDate="disabledEndDate"
3029
showTime
3130
format="YYYY-MM-DD HH:mm:ss"
32-
:value="endValue"
3331
placeholder="End"
34-
@change="onEndChange"
32+
v-model="endValue"
3533
:open="endOpen"
3634
@openChange="handleEndOpenChange"
3735
/>
@@ -46,6 +44,14 @@ export default {
4644
endOpen: false,
4745
}
4846
},
47+
watch: {
48+
startValue(val) {
49+
console.log('startValue', val)
50+
},
51+
endValue(val) {
52+
console.log('endValue', val)
53+
}
54+
},
4955
methods: {
5056
disabledStartDate (startValue) {
5157
const endValue = this.endValue;
@@ -61,12 +67,6 @@ export default {
6167
}
6268
return startValue.valueOf() >= endValue.valueOf();
6369
},
64-
onStartChange (value) {
65-
this.startValue = value;
66-
},
67-
onEndChange (value) {
68-
this.endValue = value
69-
},
7070
handleStartOpenChange (open) {
7171
if (!open) {
7272
this.endOpen = true;

‎components/date-picker/index.en-US.md

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,6 @@ The following APIs are shared by DatePicker, MonthPicker, RangePicker, WeekPicke
2727
| -------- | ----------- | ---- | ------- |
2828
| allowClear | Whether to show clear button | boolean | true |
2929
| autoFocus | get focus when component mounted | boolean | false |
30-
| className | picker className | string | '' |
3130
| dateRender | custom rendering function for date cells by setting a scoped slot | slot="dateRender" slot-scope="current, today" | - |
3231
| disabled | determine whether the DatePicker is disabled | boolean | false |
3332
| disabledDate | specify the date that cannot be selected | (currentDate: moment) => boolean | - |
@@ -62,7 +61,7 @@ The following APIs are shared by DatePicker, MonthPicker, RangePicker, WeekPicke
6261
| showTime | to provide an additional time selection | object\|boolean | [TimePicker Options](#/us/components/time-picker/API) |
6362
| showTime.defaultValue | to set default time of selected date | [moment](http://momentjs.com/) | moment() |
6463
| showToday | whether to show "Today" button | boolean | true |
65-
| value | to set date | [moment](http://momentjs.com/) | - |
64+
| value(v-model) | to set date | [moment](http://momentjs.com/) | - |
6665

6766
### DatePicker Events
6867
| Events Name | Description | Arguments |
@@ -79,7 +78,7 @@ The following APIs are shared by DatePicker, MonthPicker, RangePicker, WeekPicke
7978
| format | to set the date format, refer to [moment.js](http://momentjs.com/) | string | "YYYY-MM" |
8079
| monthCellContentRender | Custom month cell content render method by setting a scoped slot | slot="monthCellContentRender" slot-scope="date, locale" | - |
8180
| renderExtraFooter | render extra footer in panel by setting a scoped slot | slot="renderExtraFooter" | - |
82-
| value | to set date | [moment](http://momentjs.com/) | - |
81+
| value(v-model) | to set date | [moment](http://momentjs.com/) | - |
8382

8483
### MonthPicker Events
8584
| Events Name | Description | Arguments |
@@ -92,7 +91,7 @@ The following APIs are shared by DatePicker, MonthPicker, RangePicker, WeekPicke
9291
| -------- | ----------- | ---- | ------- |
9392
| defaultValue | to set default date | [moment](http://momentjs.com/) | - |
9493
| format | to set the date format, refer to [moment.js](http://momentjs.com/) | string | "YYYY-wo" |
95-
| value | to set date | [moment](http://momentjs.com/) | - |
94+
| value(v-model) | to set date | [moment](http://momentjs.com/) | - |
9695

9796
### WeekPicker Events
9897
| Events Name | Description | Arguments |
@@ -110,7 +109,7 @@ The following APIs are shared by DatePicker, MonthPicker, RangePicker, WeekPicke
110109
| renderExtraFooter | render extra footer in panel by setting a scoped slot| slot="renderExtraFooter" | - |
111110
| showTime | to provide an additional time selection | object\|boolean | [TimePicker Options](#/us/components/time-picker/API) |
112111
| showTime.defaultValue | to set default time of selected date, [demo](https://ant.design/components/date-picker/#components-date-picker-demo-disabled-date) | [moment](http://momentjs.com/)\[] | [moment(), moment()] |
113-
| value | to set date | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - |
112+
| value(v-model) | to set date | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - |
114113

115114
### RangePicker Events
116115
| Events Name | Description | Arguments |

‎components/date-picker/index.zh-CN.md

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,6 @@
2727
| --- | --- | --- | --- |
2828
| allowClear | 是否显示清除按钮 | boolean | true |
2929
| autoFocus | 自动获取焦点 | boolean | false |
30-
| className | 选择器 className | string | '' |
3130
| dateRender | 作用域插槽，自定义日期单元格的内容 | slot="dateRender" slot-scope="current, today" | - |
3231
| disabled | 禁用 | boolean | false |
3332
| disabledDate | 不可选择的日期 | (currentDate: moment) => boolean | 无 |
@@ -63,7 +62,7 @@
6362
| showTime | 增加时间选择功能 | Object\|boolean | [TimePicker Options](#/cn/components/time-picker/API) |
6463
| showTime.defaultValue | 设置用户选择日期时默认的时分秒 | [moment](http://momentjs.com/) | moment() |
6564
| showToday | 是否展示“今天”按钮 | boolean | true |
66-
| value | 日期 | [moment](http://momentjs.com/) | 无 |
65+
| value(v-model) | 日期 | [moment](http://momentjs.com/) | 无 |
6766

6867
### DatePicker事件
6968

@@ -80,7 +79,7 @@
8079
| format | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string | "YYYY-MM" |
8180
| monthCellContentRender | 自定义的月份内容渲染方法 | slot="monthCellContentRender" slot-scope="date, locale" | - |
8281
| renderExtraFooter | 在面板中添加额外的页脚 | slot="renderExtraFooter" | - |
83-
| value | 日期 | [moment](http://momentjs.com/) | 无 |
82+
| value(v-model) | 日期 | [moment](http://momentjs.com/) | 无 |
8483

8584
### MonthPicker事件
8685

@@ -94,7 +93,7 @@
9493
| --- | --- | --- | --- |
9594
| defaultValue | 默认日期 | [moment](http://momentjs.com/) | - |
9695
| format | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string | "YYYY-wo" |
97-
| value | 日期 | [moment](http://momentjs.com/) | - |
96+
| value(v-model) | 日期 | [moment](http://momentjs.com/) | - |
9897

9998
### WeekPicker事件
10099

@@ -113,7 +112,7 @@
113112
| renderExtraFooter | 在面板中添加额外的页脚 | slot="renderExtraFooter" | - |
114113
| showTime | 增加时间选择功能 | Object\|boolean | [TimePicker Options](#/cn/components/time-picker/API) |
115114
| showTime.defaultValue | 设置用户选择日期时默认的时分秒 | [moment](http://momentjs.com/)\[] | [moment(), moment()] |
116-
| value | 日期 | [moment](http://momentjs.com/)\[] | 无 |
115+
| value(v-model) | 日期 | [moment](http://momentjs.com/)\[] | 无 |
117116

118117
### RangePicker事件
119118

‎components/date-picker/wrapPicker.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,10 @@ export default function wrapPicker (Picker, props, defaultFormat) {
3434
prefixCls: 'ant-calendar',
3535
inputPrefixCls: 'ant-input',
3636
}),
37+
model: {
38+
prop: 'value',
39+
event: 'change',
40+
},
3741

3842
mounted () {
3943
const { autoFocus, disabled } = this

0 commit comments

Comments
 (0)