1

我正在使用 react-native-calendar-picker 库
如何禁用日期 b/w 选择的 startdate 和 enddate
请帮帮我！
https://www.npmjs.com/package/react-native-calendar-picker

onDateChange(date, type) {
    //function to handle the date change 
    console.log("date",date,type)
    if (type === 'END_DATE') {
      this.setState({
        selectedEndDate:moment(date).format("YYYYMMDD"),
      });
    } else {
      this.setState({
        selectedStartDate: moment(date).format("YYYYMMDD"),
        selectedEndDate: null,
      });
    }

  }


这里渲染函数

  <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}
    />
4

2 回答 2

1

当你遇到这个问题时，首先你应该阅读官方API。我找到了两个道具 disabledDates和enableDateChange。正如文档所说，我觉得这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

如果您想更深入地了解它，可以阅读源代码。源代码位于 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

我希望你了解这个想法，然后自己寻找解决方案。最后希望对你有帮助

于 2019-11-05T15:04:05.357 回答
0

要禁用所选日期范围之间的日期，您可以使用disabledDates道具，您可以在其中提供日期数组或函数，如下所示：

<CalendarPicker
...
disabledDates={date => {
      var startDate = this.state.selectedStartDate;
      var endDate = this.state.selectedEndDate;
      return date.isBetween(startDate, endDate);
}}
于 2019-11-05T13:44:18.113 回答