0

How to disable dates between Min and Max dates in material UI date textField?

Example, Let's say minimum date is today's date 01/30/2023 and maximum date is next month's date 02/30/2023. I want to disable 01/31/2023, 02/01/2023 and 02/02/2023 dates in the calendar.

My code is:

<TextField
 variant="outlined"
 id={row?.id} 
 size="small"
 onKeyPress={(e) => {
     e.preventDefault()
 }}
 type="date"
 inputProps={{  
 min: "01-30-2023",
 max: "02-30-2023"   
 }}
></TextField>

Please help me to find the solution.

2 Answers 2

0

I think by using TextField with type='date', it's rendering just a text field and you are relying on browser native datepicker, using which it's difficult to achieve what you want. Instead if you change to DatePicker from mui, it has a property shouldDisableDate, which takes a function, where you can add the logic to disable specific date.

0

You can use mui datepicker and minDate and maxDate props

sth like this :

const [selectedDate,setSelectedDate] = useState();
  return (
    <DatePicker
      placeholder="MM-DD-YYYY"
      format={'MM-DD-YYYY'}
      maxDate="02-30-2023"
      minDate="01-30-2023"
      value={selectedDate}
      onChange={(date)=>setSelectedDate(date)}
      animateYearScrolling={false}
      autoOk={true}
      clearable
    />
  );

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.