在 React Native 日历选择器中，我想通过提供一个函数来禁用某些日期

Posted 2023-05-07

【中文标题】在 React Native 日历选择器中，我想通过提供一个函数来禁用某些日期

【英文标题】：In React Native calendar picker, I want to disable some dates by giving a function

【发布时间】：2021-05-15 04:15:33

【问题描述】：

我一直在研究一个日历主题（react-native-calendar-picker）。如果这不起作用，您能否建议我使用日期选择器依赖项，该依赖项具有范围可用性、禁用日期，并在可能的情况下禁用周末。我正在使用时刻。

我的代码：

import CalendarPicker from 'react-native-calendar-picker';
import moment from 'moment';
<CalendarPicker
          startFromMonday=true
          allowRangeSelection=true
          minDate=minDate
          maxDate=maxDate
          //disabledDates=[new Date('13/02/2021'), new Date('14/02/2021'), new Date('14/02/2021')] tried so many forms too
          disabledDates=  Date(2021,2,13)
          width=250
          height=250
          maxRangeDuration=10
          todayBackgroundColor="#f2e6ff"
          selectedDayColor="#7300e6"
          selectedDayTextColor="#FFFFFF"
          onDateChange=this.onDateChange
        />

【问题讨论】：

我个人使用了react-native-calendars (npmjs.com/package/react-native-calendars)，它工作得非常好，文档也写得很好（它也非常可定制）。也许这对你有帮助

@dianaqqq 非常感谢你，我得到了所有想要的功能。你能介意如何编写一个函数来禁用从 12-02-2021 到 14-03-2021 的时间段.

我检查了您提到的库中的问题，我认为问题在于您提供的禁用日期格式不正确。它们应该是时间戳，像这样2021-02-12T10:01:13+02:00，可以像这样得到moment('2021-02-12').format()(github.com/stephy/CalendarPicker/issues/263)

【参考方案1】：

试试这个：

<CalendarPicker
    ...
    disabledDates=date => 
          let startDate = ...this.state.selectedStartDate
          let endDate =...this.state.selectedEndDate
          if(date.isBetween(startDate, endDate))
                 return true
           else 
                return false
          
    
    // or use it as an array 

我相信你也可以传递一个函数，但我还没有尝试过。