add datepicker support v-model

Author: tangjinzhou

components/date-picker/RangePicker.jsx

@@ -63,7 +63,10 @@ export default {
     allowClear: true,
     showToday: false,
   }),
-
+  model: {
+    prop: 'value',
+    event: 'change',
+  },
   data () {
     const value = this.value || this.defaultValue || []
     if (

components/date-picker/WeekPicker.jsx

@@ -26,6 +26,10 @@ export default {
   }),
   name: 'AWeekPicker',
   mixins: [BaseMixin],
+  model: {
+    prop: 'value',
+    event: 'change',
+  },
   data () {
     const value = this.value || this.defaultValue
     if (value && !interopDefault(moment).isMoment(value)) {

components/date-picker/createPicker.js

@@ -28,6 +28,10 @@ export default function createPicker (TheCalendar, props) {
       showToday: true,
     }),
     mixins: [BaseMixin],
+    model: {
+      prop: 'value',
+      event: 'change',
+    },
     data () {
       const value = this.value || this.defaultValue
       if (value && !interopDefault(moment).isMoment(value)) {

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

@@ -20,18 +20,16 @@ When `RangePicker` does not satisfied your requirements, try to implement simila
       :disabledDate="disabledStartDate"
       showTime
       format="YYYY-MM-DD HH:mm:ss"
-      :value="startValue"
+      v-model="startValue"
       placeholder="Start"
-      @change="onStartChange"
       @openChange="handleStartOpenChange"
     />
     <a-date-picker
       :disabledDate="disabledEndDate"
       showTime
       format="YYYY-MM-DD HH:mm:ss"
-      :value="endValue"
       placeholder="End"
-      @change="onEndChange"
+      v-model="endValue"
       :open="endOpen"
       @openChange="handleEndOpenChange"
     />
@@ -46,6 +44,14 @@ export default {
       endOpen: false,
     }
   },
+  watch: {
+    startValue(val) {
+      console.log('startValue', val)
+    },
+    endValue(val) {
+      console.log('endValue', val)
+    }
+  },
   methods: {
     disabledStartDate (startValue) {
       const endValue = this.endValue;
@@ -61,12 +67,6 @@ export default {
       }
       return startValue.valueOf() >= endValue.valueOf();
     },
-    onStartChange (value) {
-      this.startValue = value;
-    },
-    onEndChange (value) {
-      this.endValue = value
-    },
     handleStartOpenChange (open) {
       if (!open) {
         this.endOpen = true;

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

@@ -27,7 +27,6 @@ The following APIs are shared by DatePicker, MonthPicker, RangePicker, WeekPicke
 | -------- | ----------- | ---- | ------- |
 | allowClear | Whether to show clear button | boolean | true |
 | autoFocus | get focus when component mounted | boolean | false |
-| className | picker className | string | '' |
 | dateRender | custom rendering function for date cells by setting a scoped slot | slot="dateRender" slot-scope="current, today" | - |
 | disabled | determine whether the DatePicker is disabled | boolean | false |
 | 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
 | showTime | to provide an additional time selection | object\|boolean | [TimePicker Options](#/us/components/time-picker/API) |
 | showTime.defaultValue | to set default time of selected date | [moment](http://momentjs.com/) | moment() |
 | showToday | whether to show "Today" button | boolean | true |
-| value | to set date | [moment](http://momentjs.com/) | - |
+| value(v-model) | to set date | [moment](http://momentjs.com/) | - |
 
 ### DatePicker Events
 | Events Name | Description | Arguments |
@@ -79,7 +78,7 @@ The following APIs are shared by DatePicker, MonthPicker, RangePicker, WeekPicke
 | format | to set the date format, refer to [moment.js](http://momentjs.com/) | string | "YYYY-MM" |
 | monthCellContentRender | Custom month cell content render method by setting a scoped slot | slot="monthCellContentRender" slot-scope="date, locale" | - |
 | renderExtraFooter | render extra footer in panel by setting a scoped slot | slot="renderExtraFooter" | - |
-| value | to set date | [moment](http://momentjs.com/) | - |
+| value(v-model) | to set date | [moment](http://momentjs.com/) | - |
 
 ### MonthPicker Events
 | Events Name | Description | Arguments |
@@ -92,7 +91,7 @@ The following APIs are shared by DatePicker, MonthPicker, RangePicker, WeekPicke
 | -------- | ----------- | ---- | ------- |
 | defaultValue | to set default date | [moment](http://momentjs.com/) | - |
 | format | to set the date format, refer to [moment.js](http://momentjs.com/) | string | "YYYY-wo" |
-| value | to set date | [moment](http://momentjs.com/) | - |
+| value(v-model) | to set date | [moment](http://momentjs.com/) | - |
 
 ### WeekPicker Events
 | Events Name | Description | Arguments |
@@ -110,7 +109,7 @@ The following APIs are shared by DatePicker, MonthPicker, RangePicker, WeekPicke
 | renderExtraFooter | render extra footer in panel by setting a scoped slot| slot="renderExtraFooter" | - |
 | showTime | to provide an additional time selection | object\|boolean | [TimePicker Options](#/us/components/time-picker/API) |
 | 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()] |
-| value | to set date | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - |
+| value(v-model) | to set date | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - |
 
 ### RangePicker Events
 | Events Name | Description | Arguments |

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

@@ -27,7 +27,6 @@
 | --- | --- | --- | --- |
 | allowClear | 是否显示清除按钮 | boolean | true |
 | autoFocus | 自动获取焦点 | boolean | false |
-| className | 选择器 className | string | '' |
 | dateRender | 作用域插槽，自定义日期单元格的内容 | slot="dateRender" slot-scope="current, today" | - |
 | disabled | 禁用 | boolean | false |
 | disabledDate | 不可选择的日期 | (currentDate: moment) => boolean | 无 |
@@ -63,7 +62,7 @@
 | showTime | 增加时间选择功能 | Object\|boolean | [TimePicker Options](#/cn/components/time-picker/API) |
 | showTime.defaultValue | 设置用户选择日期时默认的时分秒 | [moment](http://momentjs.com/) | moment() |
 | showToday | 是否展示“今天”按钮 | boolean | true |
-| value | 日期 | [moment](http://momentjs.com/) | 无 |
+| value(v-model) | 日期 | [moment](http://momentjs.com/) | 无 |
 
 ### DatePicker事件
 
@@ -80,7 +79,7 @@
 | format | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string | "YYYY-MM" |
 | monthCellContentRender | 自定义的月份内容渲染方法 | slot="monthCellContentRender" slot-scope="date, locale" | - |
 | renderExtraFooter | 在面板中添加额外的页脚 | slot="renderExtraFooter" | - |
-| value | 日期 | [moment](http://momentjs.com/) | 无 |
+| value(v-model) | 日期 | [moment](http://momentjs.com/) | 无 |
 
 ### MonthPicker事件
 
@@ -94,7 +93,7 @@
 | --- | --- | --- | --- |
 | defaultValue | 默认日期 | [moment](http://momentjs.com/) | - |
 | format | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string | "YYYY-wo" |
-| value | 日期 | [moment](http://momentjs.com/) | - |
+| value(v-model) | 日期 | [moment](http://momentjs.com/) | - |
 
 ### WeekPicker事件
 
@@ -113,7 +112,7 @@
 | renderExtraFooter | 在面板中添加额外的页脚 | slot="renderExtraFooter" | - |
 | showTime | 增加时间选择功能 | Object\|boolean | [TimePicker Options](#/cn/components/time-picker/API) |
 | showTime.defaultValue | 设置用户选择日期时默认的时分秒 | [moment](http://momentjs.com/)\[] | [moment(), moment()] |
-| value | 日期 | [moment](http://momentjs.com/)\[] | 无 |
+| value(v-model) | 日期 | [moment](http://momentjs.com/)\[] | 无 |
 
 ### RangePicker事件
 

components/date-picker/wrapPicker.js

@@ -34,6 +34,10 @@ export default function wrapPicker (Picker, props, defaultFormat) {
       prefixCls: 'ant-calendar',
       inputPrefixCls: 'ant-input',
     }),
+    model: {
+      prop: 'value',
+      event: 'change',
+    },
 
     mounted () {
       const { autoFocus, disabled } = this