antd日期选择器组件选同一天如何阻止渲染
时间: 2023-11-24 20:34:46 浏览: 119
(实习日记)Ant Design Vue日期选择器,禁止选择当前之前的时间
可以通过在 `DatePicker` 组件上设置 `disabledDate` 属性来禁止选择同一天。具体实现可以在 `disabledDate` 函数中判断当前日期是否与已选择的日期相同,如果相同则返回 `true`,否则返回 `false`,例如:
```jsx
import { DatePicker } from 'antd';
import moment from 'moment';
function disabledDate(current, selectedDate) {
// 如果当前日期与已选择的日期相同,则禁止选择
return current && moment(current).isSame(selectedDate, 'day');
}
function MyDatePicker() {
const [selectedDate, setSelectedDate] = useState(null);
function handleDateChange(date) {
setSelectedDate(date);
}
return (
<DatePicker
value={selectedDate}
onChange={handleDateChange}
disabledDate={(current) => disabledDate(current, selectedDate)}
/>
);
}
```
在上述代码中,`selectedDate` 是一个状态,用于保存已选择的日期。`handleDateChange` 函数用于更新已选择的日期。`disabledDate` 函数中,`current` 表示当前日期,`selectedDate` 则是已选择的日期。如果当前日期与已选择的日期相同,则返回 `true` 禁止选择该日期,否则返回 `false` 允许选择。
阅读全文