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

Question

我正在使用 MUI Time picker with date-fns adapter (

<LocalizationProvider dateAdapter={AdapterDateFns}>

) 添加/编辑时间。

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

这是一个有问题的代码沙箱，下面是一个奇怪的编辑行为的动图：

这可能类似于这个问题中提到的问题，它仍然没有任何答案。

我的代码错了吗，或者 MUI / date-fns 是这里的罪魁祸首？任何帮助表示赞赏。

编辑

MUI 的例子都是用dayjs，不是date-fns。但是，这个项目的许多其他部分都在使用 date-fns。只为这个领域使用另一个库似乎是错误的，而且很浪费。完全切换到 dayjs（正如下面 @sachila-ranawaka 所提到的）将是最后的选择。我正在寻找使用 date-fns 的解决方案。

Answer 1

在

AdapterDayjs

中使用

dateAdapter

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

<LocalizationProvider dateAdapter={AdapterDayjs}>

演示

Answer 2

我能够让它工作。也许你的顶级 App.js 代码有问题。

这是我所做的：

timepicker.tsx

import { TextField } from '@mui/material'
import { LocalizationProvider } from '@mui/x-date-pickers'
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns'
import { TimePicker as MuiTimePicker } from '@mui/x-date-pickers/TimePicker'

interface ITimePicker {
  time: Date | null
  setTime?: (time: Date | null) => void
}

export function TimePicker({ time, setTime }: ITimePicker) {
  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <MuiTimePicker
        value={time}
        onChange={(newValue) => {
          setTime?.(newValue)
        }}
        renderInput={(props) => <TextField {...props} />}
      />
    </LocalizationProvider>
  )
}

parent.tsx

const [time, setTime] = useState<Date | null>(null)

<TimePicker
  time={time}
  setTime={setTime}
/>