react-datepicker，禁用特定日期的问题

Question

我正在使用 react-datepicker 来实现日期和日历，它工作正常我已经成功地集成了组件，但是在禁用默认日期方面遇到了一个问题。我正在使用以下代码。

<DatePicker customInput={<ExampleCustomInput />} className="w-dtsr-date-picker"
  selected={this.state.startDate}  //called when the date is clicked
  onChange={this.handleChange}    //called only when the value is chnaged
  monthsShown={2}     //number of months to be shown
  minDate={this.props.dateProps.minDate}  //min days to be shown in the calendar
  maxDate={this.props.dateProps.maxDate}  //max days to be shown in the calendar
  onChangeRaw={this.handleDateChangeRaw}  //preventing the user from manually entering the dates or text in the input text box
/>

默认情况下说我想禁用 4/25/2019 ，我做不到，我看到组件有一个属性叫做 dayClassName ，有人用过吗，我不确定如何传递日期并将 css 应用于该特定日期。

这是我在其中一个示例中找到的 -

dayClassName={date => getDate(date) < Math.random() * 31 ? 'random' : undefined}

它对我不起作用，不确定如何禁用这个特定日期 (4/25/2019)，对此有任何帮助吗？

Answer 1

您应该能够使用 dayClassName 属性来禁用特定日期并传递您创建的 CSS class 来禁用用户点击。 dayClassName returns 一个 JS 日期，所以你必须将它与你想要禁用的日期进行比较，然后传递禁用的 CSS classname 如果它是 true

示例：

道具:

dayClassName={date => date.getTime() === new Date('04/25/2019').getTime() ? 'disabled-date' : undefined}

CSS:

.disabled-date {
  pointer-events: none;
}

Answer 2

你可以试试道具

dayPickerProps={{
       disabledDays={[
            new Date(2017, 3, 12),
            new Date(2017, 3, 2)
          ]}
}}

或直接使用道具 as

disabledDays={[
        new Date(2017, 3, 12),
        new Date(2017, 3, 2)
    ]}

编辑：抱歉将 DatePicker 误读为 DayPicker。以上适用于 DayPicker 组件。

编辑 2：根据 documentation 你试过 prop

excludeDates={[new Date(), subDays(new Date(), 1)]}

react-datepicker，禁用特定日期的问题

react-datepicker, issues disabling a specific Date

javascript

reactjs

react-redux

react-datepicker