【发布时间】:2021-10-14 10:05:41
【问题描述】:
我需要禁用特定日期列表(整个 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>
)
}
有人能指出正确的方向吗?
【问题讨论】:
标签: reactjs datepicker material-ui react-hook-form