Min and Max Date in Material UI DatePicker in React

Viewed 15726

I have a condition wherein if access value is 1 then there's no restriction in selecting dates. However if the value of access is not 1 then you can only select today. My problem is that I can't select other months even if the value of access is 1. I can only select from within the month. How can I fix this?

Please see my code here.

<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}
/>;
1 Answers

Use undefined instead of empty string if you don't want to add min/max constraints.

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

Live Demo

Edit 64194577/min-and-max-date-in-material-ui-datepicker-in-react

Related