要在Amsul DatePicker中禁用特定日期,您可以使用disabledDates选项。该选项接受一个日期数组,其中包含要禁用的日期。以下是一个示例代码,演示如何在日历上禁用特定日期:
import React, { useState } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
const Example = () => {
const [selectedDate, setSelectedDate] = useState(null);
// 禁用的日期数组
const disabledDates = [
new Date("2022-07-14"),
new Date("2022-07-15"),
new Date("2022-07-16"),
];
return (
setSelectedDate(date)}
disabled={false}
disabledDates={disabledDates}
/>
);
};
export default Example;
在上面的代码中,我们首先导入DatePicker组件,并将其从react-datepicker库中引入。然后,我们通过使用useState钩子来创建一个selectedDate状态,它将用于存储用户选择的日期。
接下来,我们在disabledDates数组中定义了要禁用的日期。在示例中,我们禁用了2022年7月14日、15日和16日。
最后,在组件中,我们将selected属性设置为selectedDate状态,并通过onChange回调函数更新selectedDate状态。我们将disabled属性设置为false以启用日期选择,并通过disabledDates属性将禁用日期数组传递给日历。
这样,Amsul DatePicker就会在日历上禁用指定的日期。您可以根据需要更改disabledDates数组中的日期。