我有一个来自后端的“YYYY-MM-DD”格式的字符串数组。我只想使用 momentjs 适配器显示 MUI 日期选择器中数组中的那些日期,而所有其他日期都必须禁用。 我怎样才能实现这个目标?
我尝试使用 shouldDisableDate 属性,但我不明白如何解释不在数组中的日期,因为日子可能会被打破。可以跳过日期,例如 14 日和 16 日。现在我尝试在不同的日子中使用
const days
以便仅查看日历中的那些日子。我的代码:
const HubDatePicker = ({
businessDays: { cutOffTime, daysAfterCutOffTime, daysBeforeCutOffTime },
}) => {
const isCutOffTime = moment().isAfter("2024-09-12T11:06:00");
const availableDates = isCutOffTime
? daysAfterCutOffTime
: daysBeforeCutOffTime;
const minDate = moment(availableDates[0]);
const maxDate = moment(availableDates.at(-1));
const [currentDate, setCurrentDate] = useState(minDate);
const { setValue } = useFormContext();
useEffect(() => {
setValue("deliveryDate", currentDate.format("YYYY-MM-DD"));
}, [setValue, currentDate]);
const days = [
"2024-09-14",
"2024-09-15",
"2024-09-16",
"2024-09-17",
"2024-09-18",
"2024-09-19",
"2024-09-22",
"2024-09-23",
"2024-09-24",
"2024-09-25",
];
return (
<LocalizationProvider dateAdapter={AdapterMoment} adapterLocale="en-gb">
<DatePicker
minDate={minDate}
maxDate={maxDate}
disablePast
value={currentDate}
onAccept={(date) => setCurrentDate(moment(date))}
label="Date"
sx={{ width: "100%" }}
slotProps={{
textField: {
required: true,
id: "oi-delivery-form-date",
},
}}
/>
</LocalizationProvider>
);
};
这可以使用 MUI DatePicker 的 shouldDisableDate 属性来实现,它允许您指定一个返回布尔值的函数,该值告诉是否必须根据您的标准禁用日期。
以下是如何将其应用到 HubDatePicker 组件上。
将可用日期整理成形状:将日期字符串数组转换为 Moment.js 对象以便于比较。
定义
shouldDisableDate
函数:此函数将检查正在呈现的日期是否包含在您的可用日期中。
建议代码:
import React, { useEffect, useState } from 'react';
import moment from 'moment';
import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers';
import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
import { useFormContext } from 'react-hook-form';
const HubDatePicker = ({
businessDays: { cutOffTime, daysAfterCutOffTime, daysBeforeCutOffTime },
}) => {
const isCutOffTime = moment().isAfter(cutOffTime);
const availableDates = isCutOffTime ? daysAfterCutOffTime : daysBeforeCutOffTime;
const minDate = moment(availableDates[0]);
const maxDate = moment(availableDates.at(-1));
const [currentDate, setCurrentDate] = useState(minDate);
const { setValue } = useFormContext();
useEffect(() => {
setValue("deliveryDate", currentDate.format("YYYY-MM-DD"));
}, [setValue, currentDate]);
// Convert available dates to Moment.js objects
const availableMoments = availableDates.map(date => moment(date));
// Function to disable dates not in availableMoments
const shouldDisableDate = (date) => {
return !availableMoments.some(availableDate => availableDate.isSame(date, 'day'));
};
return (
<LocalizationProvider dateAdapter={AdapterMoment} adapterLocale="en-gb">
<DatePicker
minDate={minDate}
maxDate={maxDate}
disablePast
value={currentDate}
onAccept={(date) => setCurrentDate(moment(date))}
label="Date"
shouldDisableDate={shouldDisableDate}
sx={{ width: "100%" }}
slotProps={{
textField: {
required: true,
id: "oi-delivery-form-date",
},
}}
/>
</LocalizationProvider>
);
};
export default HubDatePicker;