MUI date picker: disable list of specific dates within a month

Question

I need to disable a list of specific dates (all of October except for the 4th, 5th, 6th, 7th, 8th, 9th, 10th and 18th). I understand that this can be achieved with shouldDisableDate but its documentation is not clear to me.

Here is my code:

import React, { useState } from 'react'
import DateMomentUtils from '@date-io/moment'
import { KeyboardDatePicker, MuiPickersUtilsProvider } from '@material-ui/pickers'
import { Controller, useFormContext } from 'react-hook-form'
const startDate = new Date('October 4, 2021 12:00:00')
const endDate = new Date('October 18, 2021 12:00:00')
const disableDates = () => {
    const date1 = Date('October 10, 2021 12:00:00')
    return date1
  }
const CalendarInput = () => {
  const { control } = useFormContext()
  const [selectedDate, handleDateChange] = useState(new Date())
  
  return (
    <MuiPickersUtilsProvider utils={DateMomentUtils}>
      <Controller
        name='MUIPicker'
        control={control}
        render={({ field: { ref, ...rest } }) => (
          <KeyboardDatePicker

            variant='static'
            orientation='landscape'
            id='date-picker-dialog'
            label='Pick a date'
            format='MM/MM/YYYY'
            KeyboardButtonProps={{
              'aria-label': 'change date'
            }}
            value={selectedDate}
            onChange={handleDateChange}
            shouldDisableDate={disableDates}
            maxDate={endDate}
            minDate={startDate}
            {...rest}
          />
        )}
      />
    </MuiPickersUtilsProvider>
  )
}

Can someone point me in the right direction?

Answer 1

Here is how I solved it:

const disableDates = (date) => {
return moment(date).format('DD') > 10 && moment(date).format('DD') < 18 }