Material Ui - Date Textfield disable date-CodePudding

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.

CodePudding user response：

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.

CodePudding user response：

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
    />
  );