github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

add datepicker support v-model

pull/9/head
tjz 2018-04-14 21:22:09 +08:00
parent 950365b3d2
commit c2ab98a101
7 changed files with 34 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
components/date-picker/RangePicker.jsx
View File

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

4
components/date-picker/WeekPicker.jsx
View File

@ -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)) {

4
components/date-picker/createPicker.js
View File

@ -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)) {

20
components/date-picker/demo/start-end.md
View File

@ -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;

9
components/date-picker/index.en-US.md
View File

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

9
components/date-picker/index.zh-CN.md
View File

@ -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事件

4
components/date-picker/wrapPicker.js
View File

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