React native 如何禁用在react native中已选择startdate和enddate的日期

我正在使用react本机日历选择器库
如何禁用所选开始日期和结束日期的日期
请帮帮我

这里是渲染函数

  <CalendarPicker
          startFromMonday={true}
          allowRangeSelection={true}
          minDate={minDate}
          maxDate={maxDate}
          weekdays={['Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun']}
          months={[
            'January',
            'Febraury',
            'March',
            'April',
            'May',
            'June',
            'July',
            'August',
            'September',
            'October',
            'November',
            'December',
          ]}
          previousTitle="Previous"
          nextTitle="Next"
          todayBackgroundColor="#e756001a"
          selectedDayColor="#FFC926"
          selectedDayTextColor="#000000"
          scaleFactor={375}
          textStyle={{
            fontFamily: 'Cochin',
            color: '#000000',
          }}
 onDateChange={this.onDateChange}
    />

---

要禁用所选日期范围之间的日期，您可以使用

disabledDates

道具，在该道具中，您可以提供如下所示的日期数组或函数：

<CalendarPicker
...
disabledDates={date => {
      var startDate = this.state.selectedStartDate;
      var endDate = this.state.selectedEndDate;
      return date.isBetween(startDate, endDate);
}}

{
var startDate=this.state.selectedStartDate；
var endDate=this.state.selectedEndDate；
返回日期.isBetween（开始日期，结束日期）；
}}

当你遇到这个问题时，首先你应该阅读官方文件。我找到两个道具

禁用日期

和

启用日期更改

。正如文档所说，我发现

disabledDates

很好

然后可以使用以下代码：

<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 

{
让startDate={…this.state.selectedStartDate}
让endDate={…this.state.selectedEndDate}
if（date.isBetween（startDate，endDate））{
返回真值
}否则{
返回错误
}
}}
//或者将其用作数组

如果您想进一步了解它，可以阅读源代码。源代码位于index.js和Day.js中

// in the index.js, it is the CalendarPicker, in it render method, we find the disabledDates, then we look at the DaysGridView.js
<DaysGridView
            enableDateChange={enableDateChange}
            month={currentMonth}
            year={currentYear}
            styles={styles}
            onPressDay={this.handleOnPressDay}
            disabledDates={_disabledDates}
            minRangeDuration={minRangeDurationTime}
            maxRangeDuration={maxRangeDurationTime}
            startFromMonday={startFromMonday}
            allowRangeSelection={allowRangeSelection}
            selectedStartDate={selectedStartDate && moment(selectedStartDate)}
            selectedEndDate={selectedEndDate && moment(selectedEndDate)}
            minDate={minDate && moment(minDate)}
            maxDate={maxDate && moment(maxDate)}
            textStyle={textStyle}
            todayTextStyle={todayTextStyle}
            selectedDayStyle={selectedDayStyle}
            selectedRangeStartStyle={selectedRangeStartStyle}
            selectedRangeStyle={selectedRangeStyle}
            selectedRangeEndStyle={selectedRangeEndStyle}
            customDatesStyles={customDatesStyles}
          />
// in the DaysGridViews render method, the props is pass to the day, then we look at the day.js
         <Day
              key={day}
              day={day}
              month={month}
              year={year}
              styles={styles}
              onPressDay={onPressDay}
              selectedStartDate={selectedStartDate}
              selectedEndDate={selectedEndDate}
              allowRangeSelection={allowRangeSelection}
              minDate={minDate}
              maxDate={maxDate}
              disabledDates={disabledDates}
              minRangeDuration={minRangeDuration}
              maxRangeDuration={maxRangeDuration}
              textStyle={textStyle}
              todayTextStyle={todayTextStyle}
              selectedDayStyle={selectedDayStyle}
              selectedRangeStartStyle={selectedRangeStartStyle}
              selectedRangeStyle={selectedRangeStyle}
              selectedRangeEndStyle={selectedRangeEndStyle}
              customDatesStyles={customDatesStyles}
              enableDateChange={enableDateChange}
            />

// in the Day.js, firstly, it will check it and return a props dateIsDisabled 
 if (disabledDates) {
    if (Array.isArray(disabledDates) && disabledDates.indexOf(thisDay.valueOf()) >= 0) {
      dateIsDisabled = true;
    }
    else if (disabledDates instanceof Function) {
      dateIsDisabled = disabledDates(thisDay);
    }
  }

//then it will check it if it is outrange
dateOutOfRange = dateIsAfterMax || dateIsBeforeMin || dateIsDisabled || dateIsBeforeMinDuration || dateIsAfterMaxDuration;

// we find if the date is in the disabledDates, the dateIsDisabled is true, then dateOutOfRange is true, in this case, it returns the following view
else {  // dateOutOfRange = true
    return (
      <View style={styles.dayWrapper}>
        <Text style={[textStyle, styles.disabledText]}>
          { day }
        </Text>
      </View>
    )
  }
// in the end, it is a text, so it can not opress

//在index.js中，它是CalendarPicker，在它的render方法中，我们找到disabledDates，然后查看DaysGridView.js
//在DaysGridViews渲染方法中，道具被传递到day，然后我们看day.js
//在Day.js中，首先，它将检查并返回道具dateIsDisabled
如果（禁用数据项）{
if（Array.isArray（disabledDates）&&disabledDates.indexOf（thisDay.valueOf（））>=0）{
dateIsDisabled=true；
}
else if（禁用函数的instanceof）{
dateIsDisabled=禁用日期（当天）；
}
}
//然后它会检查它是否超出范围
dateOutOfRange=dateIsAfterMax | | dateIsBeforeMin | | dateIsDisabled | | dateIsBeforeMinDuration | | dateIsAfterMaxDuration；
//我们发现如果日期在disabledDates中，dateIsDisabled为true，那么dateOutOfRange为true，在这种情况下，它返回以下视图
else{//dateOutOfRange=true
返回(
{day}
)
}
//最后，它是一个文本，所以它不能操作

---

我希望你能理解这个想法，然后自己寻找解决办法。最后，我希望它能对你有所帮助

你有什么开始吗？你能提供任何代码吗？我已经提供了代码，非常感谢！如果你想再次选择日期，这很奇怪，如何选择谢谢你的建议和建议helping@CharanGowda，如果它对您有帮助，请接受或投票，谢谢

// in the index.js, it is the CalendarPicker, in it render method, we find the disabledDates, then we look at the DaysGridView.js
<DaysGridView
            enableDateChange={enableDateChange}
            month={currentMonth}
            year={currentYear}
            styles={styles}
            onPressDay={this.handleOnPressDay}
            disabledDates={_disabledDates}
            minRangeDuration={minRangeDurationTime}
            maxRangeDuration={maxRangeDurationTime}
            startFromMonday={startFromMonday}
            allowRangeSelection={allowRangeSelection}
            selectedStartDate={selectedStartDate && moment(selectedStartDate)}
            selectedEndDate={selectedEndDate && moment(selectedEndDate)}
            minDate={minDate && moment(minDate)}
            maxDate={maxDate && moment(maxDate)}
            textStyle={textStyle}
            todayTextStyle={todayTextStyle}
            selectedDayStyle={selectedDayStyle}
            selectedRangeStartStyle={selectedRangeStartStyle}
            selectedRangeStyle={selectedRangeStyle}
            selectedRangeEndStyle={selectedRangeEndStyle}
            customDatesStyles={customDatesStyles}
          />
// in the DaysGridViews render method, the props is pass to the day, then we look at the day.js
         <Day
              key={day}
              day={day}
              month={month}
              year={year}
              styles={styles}
              onPressDay={onPressDay}
              selectedStartDate={selectedStartDate}
              selectedEndDate={selectedEndDate}
              allowRangeSelection={allowRangeSelection}
              minDate={minDate}
              maxDate={maxDate}
              disabledDates={disabledDates}
              minRangeDuration={minRangeDuration}
              maxRangeDuration={maxRangeDuration}
              textStyle={textStyle}
              todayTextStyle={todayTextStyle}
              selectedDayStyle={selectedDayStyle}
              selectedRangeStartStyle={selectedRangeStartStyle}
              selectedRangeStyle={selectedRangeStyle}
              selectedRangeEndStyle={selectedRangeEndStyle}
              customDatesStyles={customDatesStyles}
              enableDateChange={enableDateChange}
            />

// in the Day.js, firstly, it will check it and return a props dateIsDisabled 
 if (disabledDates) {
    if (Array.isArray(disabledDates) && disabledDates.indexOf(thisDay.valueOf()) >= 0) {
      dateIsDisabled = true;
    }
    else if (disabledDates instanceof Function) {
      dateIsDisabled = disabledDates(thisDay);
    }
  }

//then it will check it if it is outrange
dateOutOfRange = dateIsAfterMax || dateIsBeforeMin || dateIsDisabled || dateIsBeforeMinDuration || dateIsAfterMaxDuration;

// we find if the date is in the disabledDates, the dateIsDisabled is true, then dateOutOfRange is true, in this case, it returns the following view
else {  // dateOutOfRange = true
    return (
      <View style={styles.dayWrapper}>
        <Text style={[textStyle, styles.disabledText]}>
          { day }
        </Text>
      </View>
    )
  }
// in the end, it is a text, so it can not opress