【问题标题】:MUI date picker: disable list of specific dates within a monthMUI 日期选择器:禁用一个月内的特定日期列表
【发布时间】: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


    【解决方案1】:

    我是这样解决的:

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2016-06-06
      • 2014-05-15
      • 1970-01-01
      • 2020-01-11
      • 2020-08-25
      • 1970-01-01
      相关资源
      最近更新 更多