Material UI 中的最小和最大日期 React 中的 DatePicker

Question

我有一个条件，如果 access 值为 1，则 selecting 日期没有限制。但是，如果 access 的值不是 1，那么您今天只能 select。我的问题是，即使 access 的值为 1，我也不能 select 其他月份。我只能从一个月内 select 。我该如何解决这个问题？

请在此处查看我的代码。

<KeyboardDatePicker
  minDate={access !== 1 ? new Date() : ""}
  maxDate={access !== 1 ? new Date() : ""}
  fullWidth
  InputLabelProps={{ shrink: true }}
  inputVariant="outlined"
  id="date-picker-dialog"
  label="Select Date"
  format="MM/dd/yyyy"
  clearable
  value={values.start_date}
  onChange={(val) => {
    setFieldValue("start_date", val);
  }}
  onBlur={handleBlur}
  helperText={touched.start_date ? errors.start_date : ""}
  error={touched.start_date && Boolean(errors.start_date)}
  TextFieldComponent={TextFieldComponent}
/>;

Answer 1

如果您不想添加 min/max 约束，请使用 undefined 而不是空字符串。

<KeyboardDatePicker
  minDate={!access ? firstDay : undefined}
  maxDate={!access ? lastDay : undefined}
  {...}
/>

Material UI 中的最小和最大日期 React 中的 DatePicker

Min and Max Date in Material UI DatePicker in React

reactjs

material-ui

react-material

react-hooks

现场演示