Material UI datePicker 在使用 initialFocusedDate 时没有聚焦到选定的日期

Question

我正在使用 Material UI datePicker nad 它的初始焦点日期必须是 10 月 4 日，minDate 是 10 月 4 日，maxDate 10 月 10 日。此外，10 月 4 日和 10 月 10 日之间的一些日期被禁用 shouldDisableDate。

到目前为止，一切都按预期工作，但我还需要将其 selected 值保存到全局状态，这是我使用 onChange 属性完成的.

现在，一旦我使用 onChange 属性，日历的初始焦点日期就会更改为 today/current 日期，但正如我上面提到的，它的初始焦点日期必须是 10 月, 第四。如果我尝试使用 initialFocusedDate 属性设置它的初始焦点日期，突出显示 10 月 4 日，但是当我 select 一个不同的日期时，它不会得到 highlighted/focused。

import React from 'react'
import DateMomentUtils from '@date-io/moment'
import { KeyboardDatePicker, MuiPickersUtilsProvider } from '@material-ui/pickers'
import { Controller } from 'react-hook-form'
import moment from 'moment'

const CalendarInput = ({ control, name, accessibility, setValues }) => {
  const startDate = moment('October 4, 2021')
  let endDate = moment('October 18, 2021')

  if (accessibility === true) {
    endDate = moment('October 10, 2021')
  }
  const skipDates = (date) => {
    return moment(date).format('DD') > 10 && moment(date).format('DD') < 18
  }

  return (
    <MuiPickersUtilsProvider utils={DateMomentUtils}>
      <Controller
        require
        name={name}
        control={control}
        render={({ field: { ref, ...rest } }) => (
          <KeyboardDatePicker
            autoOk
            variant='static'
            id='date-picker-dialog'
            label='Pick a date *'
            format='MM/DD/YYYY'
            KeyboardButtonProps={{
              'aria-label': 'change date'
            }}
            {...rest}
            minDate={startDate}
            maxDate={endDate}
            shouldDisableDate={skipDates}
           //Here is where thing start not working as expected 
            onChange={(event, x) => {
               setValues({ selectedDate: x })
            }}
            initialFocusedDate={startDate}
          />
        )}
      />
    </MuiPickersUtilsProvider>
  )
}

export default CalendarInput

任何想法，我错过了什么？

Answer 1

您正在覆盖 onChange 道具，该道具最初是通过传播 {...rest} 使用 RHF 的 onChange 处理程序设置的。因此，在来自 <KeyboardDatePicker /> 的 onChange 回调中，您还应该调用 RHF 的 onChange.

<Controller
  require
  name={name}
  control={control}
  defaultValue={startDate}
  render={({ field: { ref, onChange, ...rest } }) => (
    <KeyboardDatePicker
      autoOk
      variant="static"
      id="date-picker-dialog"
      label="Pick a date *"
      format="MM/DD/YYYY"
      KeyboardButtonProps={{
        'aria-label': 'change date',
      }}
      {...rest}
      minDate={startDate}
      maxDate={endDate}
      shouldDisableDate={skipDates}
      onChange={(event, x) => {
        setValues({ selectedDate: x });

        onChange(x);
      }}
      initialFocusedDate={startDate}
    />
  )}
/>

请注意 render 道具回调中的析构 RHF 的 onChange 来自 <Controller />，用于 <KeyboardDatePicker /> 的 onChange 道具。

您还应该为您的字段设置一个 defaultValue，来自 documentation:

You need to either provide defaultValue at the field-level or useForm with defaultValues.

我在上面的代码示例中用startDate设置了它。

Material UI datePicker 在使用 initialFocusedDate 时没有聚焦到选定的日期

Material UI datePicker does not focus to a selected date when using initialFocusedDate

reactjs

material-ui

react-hook-form