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