通过 Mui 日期选择器使用日期数组

问题描述 投票:0回答:1

我有一个来自后端的“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>
  );
};
reactjs material-ui momentjs
1个回答
1
投票

这可以使用 MUI DatePicker 的 shouldDisableDate 属性来实现,它允许您指定一个返回布尔值的函数,该值告诉是否必须根据您的标准禁用日期。

以下是如何将其应用到 HubDatePicker 组件上。

  1. 将可用日期整理成形状:将日期字符串数组转换为 Moment.js 对象以便于比较。

  2. 定义

    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;
© www.soinside.com 2019 - 2024. All rights reserved.