首页ant-range-picker设置选择范围

ant-range-picker设置选择范围

时间: 2025-06-28 21:21:31 浏览: 6

### 设置 Ant Design Vue RangePicker 可选日期范围在 Ant Design Vue 的 `RangePicker` 组件中，通过配置 `disabledDate` 属性可以实现对可选日期范围的精确控制。此属性接收一个函数作为参数，该函数返回布尔值来决定某个特定日期是否可用。为了满足指定的需求——即第一个选定日期保存到 `currentDate` 并用于禁用后续选择直到第二个日期被选取，则可以在组件内部维护状态变量 `currentDate` 来跟踪当前已选中的起始日期，并利用这个信息调整 `disabledDate` 函数的行为[^1]： ```javascript <template> <a-range-picker :disabled-date="disabledDate" @change="handleChange"/> </template> <script setup> import { ref } from 'vue'; let currentDate = ref(null); const disabledDate = (current) => { if (!current || !currentDate.value) return false; const tooEarly = current && current < currentDate.value.startOf('day'); const tooLate = current && current > currentDate.value.endOf('day'); return tooEarly || tooLate; }; const handleChange = (dates, dateStrings) => { // 当选择了两个日期时重置currentDate if(dateStrings.length === 2){ currentDate.value = null; } else{ currentDate.value = dates[0]; } }; </script> ``` 上述代码展示了如何定义 `disabledDate` 方法以及处理日期变化事件的方法 `handleChange` 。每当用户改变日期选择时都会触发 `handleChange` ，此时会更新 `currentDate` 或将其设为空以便重新启用整个日期区间供下一次选择。

阅读全文