我正在try 将Day.js与Material-UIDatePicker组件一起使用在我的Reaction项目中.但是,当我将minDatemaxDate属性设置为Day.js对象时,我收到一个打字错误:

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

我知道DatePicker期望minDatemaxDateDate类型,但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>
  );
  );
}

Expected Behavior: 我希望DatePicker组件接受minDatemaxDate作为Day.js对象,而不会出现任何打字错误.

一百零二 在对minDatemaxDate使用Day.js对象时,我收到了上面提到的打字错误.

What I've tried: 我try 使用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)

我怎样才能妥善解决打字错误(S)?

推荐答案

您的代码看起来不错,但我认为您错误地传递了DatepickerProperties接口.

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

例如,您可以try 执行以下操作:

import dayjs, { Dayjs } from "dayjs";

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

您可以看到整个示例here.

Typescript相关问答推荐

泛型函数类型验证

我应该使用什么类型的React表单onsubmit事件?

将props传递给子组件并有条件地呈现它''

如何使用泛型类型访问对象

获取函数中具有动态泛型的函数的参数

路由链接始终返回到

有什么方法可以类型安全地包装import()函数吗?

使用动态输出类型和泛型可重用接口提取对象属性

不带其他属性的精确函数返回类型

vue-tsc失败,错误引用项目可能无法禁用vue项目上的emit

@TANSTACK/REACT-QUERY中发生Mutations 后的数据刷新问题

对象类型的TypeScrip隐式索引签名

为什么特定的字符串不符合包括该字符串的枚举?

Rxjs将省略的可观测对象合并到一个数组中

如何避免多个类型参数重复?

可以用任意类型实例化,该类型可能与

JSX.Element';不可分配给类型';ReactNode';React功能HOC

递归JSON类型脚本不接受 node 值中的变量

递归地排除/省略两种类型之间的公共属性

Mongodb TypeError:类继承 events_1.EventEmitter 不是对象或 null