reactjs - 无法使用 date-fns (AdapterDateFns) Localizationprovider 在 MUI X TimePicker 中正确编辑时间

Question

我正在使用MUI Time picker使用 date-fns 适配器 ( <LocalizationProvider dateAdapter={AdapterDateFns}> ) 添加/编辑时间。

当时间选择器为空时，输入新时间可以正常工作。但是，在编辑现有时间条目时，如果光标不跳动且值默认为 0 等，则无法正确更改任何值。

这是一个code sandbox有问题，下面是奇怪的编辑行为的 gif:

这可能与提到的问题类似 in this question ，仍然没有任何答案。

是我的代码错误，还是 MUI/date-fns 是罪魁祸首？如有任何帮助，我们将不胜感激。

编辑

MUI的示例都使用dayjs，而不是date-fns。但是，date-fns 正在该项目的许多其他部分中使用。仅仅针对这个领域使用另一个库似乎是错误的，而且是浪费的。完全切换到 dayjs (正如下面@sachila-ranawaka 所提到的)将是最后的手段。我正在寻找使用 date-fns 的解决方案。

Answer 1

在dateAdapter中使用AdapterDayjs

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

<LocalizationProvider dateAdapter={AdapterDayjs}>

Demo