基于MaterialUI的DatePickerField无法切换年月问题求助

核心问题点 #

1. minDate参数构造错误 #

你当前传入的minDate={new Date('31/12/1900')}不符合JS Date构造函数的标准解析规则，绝大多数浏览器无法正确解析dd/mm/yyyy格式的字符串，会生成Invalid Date。日期选择器拿到无效的最小日期后，内部日期范围计算逻辑紊乱，直接导致无法正常切换年月。

2. views属性顺序错误 #

Material UI pickers的views属性要求按照选择逻辑排序，要实现年-月-日的选择流程，正确顺序为['year', 'month', 'date']，你当前写的['date', 'month', 'year']会导致视图切换逻辑异常，无法正常跳转年月视图。

3. 冗余状态可能导致不同步 #

组件内部单独维护的selectedDate状态和Formik的field.value存在重复同步逻辑，极端场景下可能出现日期状态不一致，间接导致切换异常。 #

修复代码 #

第一步：修改组件调用参数 #

<DatePickerField
  name={dateOfBirth.name}
  label={dateOfBirth.label}
  format="dd/mm/yyyy"
  views={['year', 'month', 'date']}
  // 用年、月(0基索引，11对应12月)、日的参数构造，避免浏览器解析异常
  minDate={new Date(1900, 11, 31)}
  maxDate={new Date()}
  fullWidth
/>

第二步：优化DatePickerField组件逻辑（可选，建议修改） #

去掉内部冗余状态，直接同步Formik数据避免状态冲突：

import React from 'react';
import { useField } from 'formik';
import Grid from '@material-ui/core/Grid';
import {
  MuiPickersUtilsProvider,
  KeyboardDatePicker
} from '@material-ui/pickers';
import DateFnsUtils from '@date-io/date-fns';

export default function DatePickerField(props) {
  const [field, meta, helper] = useField(props);
  const { touched, error } = meta;
  const { setValue } = helper;
  const isError = touched && Boolean(error);

  function _onChange(date) {
    if (date) {
      try {
        setValue(date.toISOString());
      } catch (err) {
        setValue(date);
      }
    } else {
      setValue(null);
    }
  }

  return (
    <Grid container>
      <MuiPickersUtilsProvider utils={DateFnsUtils}>
        <KeyboardDatePicker
          {...field}
          {...props}
          value={field.value ? new Date(field.value) : null}
          onChange={_onChange}
          error={isError}
          invalidDateMessage={isError ? error : undefined}
          helperText={isError ? error : undefined}
        />
      </MuiPickersUtilsProvider>
    </Grid>
  );
}

修改完成后先验证minDate为有效日期，再测试年月切换即可恢复正常。

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