如何禁用React Native中已经选择的开始日期和结束日期的日期

我正在使用react-native-calendar-picker库
如何禁用日期为黑白的开始日期和结束日期
请帮帮我!

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}
    />
daxiguatao 回答:如何禁用React Native中已经选择的开始日期和结束日期的日期

遇到此问题时,首先应阅读官方的API。我找到两个道具 disabledDatesenableDateChange。正如文档所说,我发现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

我希望您了解头脑,然后自己寻找解决方案。最后,希望它能为您提供帮助

,

要禁用选定日期范围之间的日期,您可以使用disabledDates属性,其中可以提供日期数组或类似以下的函数:

<CalendarPicker
...
disabledDates={date => {
      var startDate = this.state.selectedStartDate;
      var endDate = this.state.selectedEndDate;
      return date.isBetween(startDate,endDate);
}}
本文链接:https://www.f2er.com/3160187.html

大家都在问