ant-design-vue/components/date-picker/demo/start-end.vue
Cherry7 9be58078d2
Refactor(demo): change options to composition api (#6499)
* feat(demo): A-B

* feat(demo): update B-checkbox

* feat(demo): update CheckBox -DatePicker

* feat(demo): update DatePicker - Form

* feat(demo): update Form - List

* feat(demo): update  List-pagination

* feat(demo): update  List - skeleton

* feat(demo): update  skeleton - switch

* feat(demo): update  skeleton - switch

* feat(demo): update   switch - upload

* feat(demo): update  watermark

* fix(demo): del hashId
2023-04-28 14:08:21 +08:00

85 lines
2.0 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<docs>
---
order: 11
title:
zh-CN: 自定义日期范围选择
en-US: Customized Range Picker
---
## zh-CN
`RangePicker` 无法满足业务需求时可以使用两个 `DatePicker` 实现类似的功能
> - 通过设置 `disabledDate` 方法来约束开始和结束日期
> - 通过 `open` `openChange` 来优化交互
## en-US
When `RangePicker` does not satisfied your requirements, try to implement similar functionality with two `DatePicker`.
> - Use the `disabledDate` property to limit the start and end dates.
> - Improve user experience with `open` and `openChange`.
</docs>
<template>
<a-space direction="vertical">
<a-date-picker
v-model:value="startValue"
:disabled-date="disabledStartDate"
show-time
format="YYYY-MM-DD HH:mm:ss"
placeholder="Start"
@openChange="handleStartOpenChange"
/>
<a-date-picker
v-model:value="endValue"
:disabled-date="disabledEndDate"
show-time
format="YYYY-MM-DD HH:mm:ss"
placeholder="End"
:open="endOpen"
@openChange="handleEndOpenChange"
/>
</a-space>
</template>
<script lang="ts" setup>
import { Dayjs } from 'dayjs';
import { ref, watch } from 'vue';
const startValue = ref<Dayjs>();
const endValue = ref<Dayjs>();
const endOpen = ref<boolean>(false);
const disabledStartDate = (startValue: Dayjs) => {
if (!startValue || !endValue.value) {
return false;
}
return startValue.valueOf() > endValue.value.valueOf();
};
const disabledEndDate = (endValue: Dayjs) => {
if (!endValue || !startValue.value) {
return false;
}
return startValue.value.valueOf() >= endValue.valueOf();
};
const handleStartOpenChange = (open: boolean) => {
if (!open) {
endOpen.value = true;
}
};
const handleEndOpenChange = (open: boolean) => {
endOpen.value = open;
};
watch(startValue, () => {
console.log('startValue', startValue.value);
});
watch(endValue, () => {
console.log('endValue', endValue.value);
});
</script>