disabled-date使用例,要求只能选择今天之前的日期
时间: 2024-02-09 17:11:47 浏览: 107
端口出现err-disabled现象的解决方法合集.docx
假设您使用的是 Ant Design 的 DatePicker 组件,那么可以通过 disabledDate 属性来限制日期选择范围。以下是一个示例代码:
```jsx
import { DatePicker } from 'antd';
import moment from 'moment';
function disabledDate(current) {
// 如果当前日期大于等于今天,则禁止选择
return current && current >= moment().endOf('day');
}
function MyDatePicker() {
return (
<DatePicker
disabledDate={disabledDate}
showToday={false} // 隐藏“今天”按钮
/>
);
}
```
在上面的代码中,disabledDate 函数接收一个参数 current,它代表了当前的日期。如果该函数返回 true,则禁止选择当前日期;如果返回 false,则允许选择。
在本例中,我们通过 moment.js 库获取了当前时间,并将其设为今天的最后一刻(即今天 23:59:59),然后将其与 current 比较。如果 current 大于等于今天的最后一刻,则禁止选择。
最后,我们在 DatePicker 中指定 disabledDate 属性为我们刚刚定义的 disabledDate 函数即可。注意,为了避免用户误操作,我们还将 showToday 属性设置为 false,隐藏“今天”按钮。
阅读全文