Material UI DatePicker使用initialFocusedDate时选中日期不聚焦问题

你出现的两个异常是三个配置错误共同导致的：

• 你自定义的onChange直接覆盖了Controller通过rest参数透传的默认onChange方法，导致react-hook-form无法同步更新表单内的日期值，DatePicker的状态和表单状态脱节。
• 你没有给KeyboardDatePicker显式传入value属性，组件无法感知当前选中的日期值，自然无法高亮新选中的日期。
• initialFocusedDate仅在组件首次渲染时生效，如果你没有给表单设置对应字段的初始值为10月4日，DatePicker会默认取当前日期作为初始值。

按以下步骤修改代码即可：

1. 在Controller组件上添加defaultValue属性，值为你定义的startDate，保证表单初始值就是你要的10月4日。
2. 自定义onChange时先调用rest里自带的onChange方法同步表单状态，再执行你自己的全局状态更新逻辑。
3. 给KeyboardDatePicker显式传入value={rest.value}，让组件的选中状态和表单状态同步。

修改后的代码如下：

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}
        // 新增：设置表单初始值为10月4日
        defaultValue={startDate}
        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'
            }}
            // 新增：显式绑定value
            value={rest.value}
            minDate={startDate}
            maxDate={endDate}
            shouldDisableDate={skipDates}
            onChange={(x) => {
              // 先调用Controller默认的onChange同步表单状态
              rest.onChange(x)
              // 再更新全局状态
              setValues({ selectedDate: x })
            }}
            initialFocusedDate={startDate}
          />
        )}
      />
    </MuiPickersUtilsProvider>
  )
}

export default CalendarInput

内容的提问来源于stack exchange，提问作者aadlc