ant-design-vue/components/date-picker/demo/start-end.md

81 lines
2.0 KiB
Markdown
Raw Normal View History

2018-03-19 15:05:49 +00:00
<cn>
#### 自定义日期范围选择
2018-03-15 13:40:34 +00:00
`RangePicker` 无法满足业务需求时,可以使用两个 `DatePicker` 实现类似的功能。
2018-03-20 01:10:56 +00:00
> * 通过设置 `disabledDate` 方法,来约束开始和结束日期。
> * 通过 `open` `onOpenChange` 来优化交互。
2018-03-19 15:05:49 +00:00
</cn>
2018-03-15 13:40:34 +00:00
2018-03-19 15:05:49 +00:00
<us>
#### Customized Range Picker
2018-03-15 13:40:34 +00:00
When `RangePicker` does not satisfied your requirements, try to implement similar functionality with two `DatePicker`.
2018-03-20 01:10:56 +00:00
> * Use the `disabledDate` property to limit the start and end dates.
> * Improve user experience with `open` and `onOpenChange`.
2018-03-19 15:05:49 +00:00
</us>
2018-03-15 13:40:34 +00:00
2018-03-19 15:05:49 +00:00
```html
<template>
<div>
<a-date-picker
:disabledDate="disabledStartDate"
showTime
format="YYYY-MM-DD HH:mm:ss"
2018-04-14 13:22:09 +00:00
v-model="startValue"
2018-03-19 15:05:49 +00:00
placeholder="Start"
@openChange="handleStartOpenChange"
/>
<a-date-picker
:disabledDate="disabledEndDate"
showTime
format="YYYY-MM-DD HH:mm:ss"
placeholder="End"
2018-04-14 13:22:09 +00:00
v-model="endValue"
2018-03-19 15:05:49 +00:00
:open="endOpen"
@openChange="handleEndOpenChange"
/>
</div>
</template>
<script>
2019-09-28 12:45:07 +00:00
export default {
data() {
return {
startValue: null,
endValue: null,
endOpen: false,
};
2018-03-19 15:05:49 +00:00
},
2019-09-28 12:45:07 +00:00
watch: {
startValue(val) {
console.log('startValue', val);
},
endValue(val) {
console.log('endValue', val);
},
2018-03-19 15:05:49 +00:00
},
2019-09-28 12:45:07 +00:00
methods: {
disabledStartDate(startValue) {
const endValue = this.endValue;
if (!startValue || !endValue) {
return false;
}
return startValue.valueOf() > endValue.valueOf();
},
disabledEndDate(endValue) {
const startValue = this.startValue;
if (!endValue || !startValue) {
return false;
}
return startValue.valueOf() >= endValue.valueOf();
},
handleStartOpenChange(open) {
if (!open) {
this.endOpen = true;
}
},
handleEndOpenChange(open) {
this.endOpen = open;
},
2018-03-19 15:05:49 +00:00
},
2019-09-28 12:45:07 +00:00
};
2018-03-19 15:05:49 +00:00
</script>
```