Как отключить даты, которые уже выбраны startdate и enddate в реагировать родной

Question

Я использую библиотеку реагировать-родной-календарь-выбораКак отключить ч / б выбранные начальную дату и конечную датуПожалуйста, помогите мне! 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,
      });
    }

  }

Здесь функция Render

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

Answer 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

Я надеюсь, что вы понимаете ум, а затем ищите решение самостоятельно. В конце концов, я надеюсь, что это может помочь вам

Answer 2

Чтобы отключить даты между выбранным диапазоном дат, вы можете использовать disabledDates prop, в котором вы можете указать массив дат или функцию, как показано ниже:

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