遇到此问题时,首先应阅读官方的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
我希望您了解头脑,然后自己寻找解决方案。最后,希望它能为您提供帮助
,
要禁用选定日期范围之间的日期,您可以使用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