reactjs - 如何解决 TypeScript 错误 "Type ' Dayjs' 缺少类型 'Date' 的属性“当将 Day.js 与 Material-UI DatePicker 一起使用时？

Question

我正在尝试在我的 React 项目中将 Day.js 与 Material-UI 的 DatePicker 组件结合使用。但是，当我将 minDate 和 maxDate 属性设置为 Day.js 对象时，我收到 TypeScript 错误:

Type 'Dayjs' is missing the following properties from type 'Date': toDateString, toTimeString, toLocaleDateString, toLocaleTimeString, and 35 more.

我了解 DatePicker 期望 minDate 和 maxDate 为 Date 类型，但 Day.js 返回一个 Dayjs 对象。

代码:

import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { DatePicker } from "@mui/x-date-pickers/DatePicker";
import dayjs from "dayjs";

interface DatepickerProperties {
  label: string;
  onChange: (value: Date | null) => void;
  disablePast?: boolean;
}

function Datepicker({
  label,
  onChange,
  disablePast = false,
}: DatepickerProperties) {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DatePicker
        disablePast={disablePast}
        label={label}
        onChange={onChange}
        minDate={dayjs()}
        maxDate={dayjs("9999-12-31")}
      />
    </LocalizationProvider>
  );
  );
}

预期行为: 我希望 DatePicker 组件接受 minDate 和 maxDate 作为 Day.js 对象，而不会出现任何 TypeScript 错误。

实际行为: 当我将 Day.js 对象用于 minDate 和 maxDate 时，我遇到了上面提到的 TypeScript 错误。

我尝试过的: 我尝试使用 toDate() 将 Day.js 对象转换为 Date 对象，但这会导致一堆其他错误:

AdapterDayjs.js:384 Uncaught TypeError: value.isAfter is not a function
    at AdapterDayjs.isAfterDay (AdapterDayjs.js:384:22)
    at getDefaultReferenceDate (getDefaultReferenceDate.js:53:38)
    at Object.getInitialReferenceValue (valueManagers.js:21:12)
    at useFieldState.js:58:41
    at mountState (react-dom.development.js:16986:20)
    at Object.useState (react-dom.development.js:17699:16)
    at Object.useState (react.development.js:1622:21)
    at useFieldState (useFieldState.js:48:35)
    at useField (useField.js:29:7)
    at useDateField (useDateField.js:29:10)

如何正确解决 TypeScript 错误？

Answer 1

您的代码看起来不错，但我认为您错误地传递了 DatepickerProperties 接口(interface)。

如果您想使用 Dayjs 对象进行日期操作，则应将 onChange 回调的类型从 Date 更改为 Dayjs。这样，您可以避免在 Date 和 Dayjs 对象之间进行转换并保持代码一致。

例如，您可以尝试以下操作:

import dayjs, { Dayjs } from "dayjs";

interface DatepickerProperties {
  label: string;
  onChange: (value: Dayjs | null) => void;
  disablePast?: boolean;
}

您可以看到整个示例here .