最小和最大日期不适用于 formik/material-ui/datepicker 组件

Question

这快把我逼疯了。我根本无法获得工作的最小和最大日期。这是我的代码：

          <DatePickerField
            name={dob.name}
            label={dob.label}
            format="MM/DD/YYYY"
            minDate={new Date('12/31/1920')}
            maxDate={new Date()}
            fullWidth
            onChange={(event, newdate) => { currentAge = calculateAge(newdate, currentAge); }}
          />

无论我使用什么日期，例如 1800 年 1 月 1 日，它都会显示在日期选择器的输入字段中，并且年龄显示为 220 岁（例如）。如果我选择未来的日期也是如此。年龄显示为-whatever。 calucateAge 函数工作正常，但 DatePickerField 接受任何日期。

为什么不强制设置最小和最大日期？

编辑添加如下：

这是我使用的从 Formik 改编的 DatePickerField：

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

const DatePickerField = props => {
  const [field, meta, helper] = useField(props);
  const { touched, error } = meta;
  const { setValue } = helper;
  const isError = touched && error && true;
  const { value } = field;
  const [selectedDate, setSelectedDate] = useState(null);
  //console.log("datepickerfield" + JSON.stringify(field) + "end of datepickerfield");
  useEffect(() => {
    if (value) {
      const date = new Date(value);
      setSelectedDate(date);
    }
  }, [value]);

  function _onChange(date) {
    if (date) {
      setSelectedDate(date);
      try {
        const ISODateString = date.toISOString();
        setValue(ISODateString);
      } catch (error) {
        setValue(date);
      }
    } else {
      setValue(date);
    }
  }

  return (
    <Grid container>
      <MuiPickersUtilsProvider utils={DateFnsUtils}>
        <KeyboardDatePicker
          {...field}
          {...props}
          variant="inline"
          format="MM/dd/yyyy"
          value={selectedDate}
          onChange={_onChange}
          error={isError}
          invalidDateMessage={isError && error}
          helperText={isError && error}
          disableToolbar
          KeyboardButtonProps={{
            'aria-label': 'change date',
          }}
        />
      </MuiPickersUtilsProvider>
    </Grid>
  );
}

export default DatePickerField;

此时我不知道问题出在调用还是 DatePickerField.jsx 文件本身。

任何帮助将不胜感激！

Answer 1

你需要使用字符串而不是日期

    <DatePickerField
        name={dob.name}
        label={dob.label}
        format="MM/DD/YYYY"
        minDate={new Date('12/31/1920').toString()}
        maxDate={new Date().toString()}
        fullWidth
        onChange={(event, newdate) => { currentAge = calculateAge(newdate, currentAge); }}
      />