reactjs - MUI 日期选择器：禁用一个月内的特定日期列表

Question

我需要禁用特定日期列表（整个 10 月，除了 4 日、5 日、6 日、7 日、8 日、9 日、10 日和 18 日）。我知道这可以实现，shouldDisableDate但我不清楚它的文档。

这是我的代码：

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>
  )
}

有人可以指出我正确的方向吗？

标签： reactjsdatepickermaterial-uireact-hook-form

Answer 1

这是我解决它的方法：

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