Closed Saad-Bashar closed 4 years ago
@peacechen please help me on my issue. I have a set of dates, which needs to be enabled, rest all the dates should be disabled. Which approach should I consider to do this?
@IbrahimSheikh24
Edit: minDate
and maxDate
may be an even easier solution to your problem. You shouldn't need to use disabledDates
.
You could pass a function to disabledDates
. Here's a sample:
render() {
const minDate = new Date(); // Today
const maxDate = new Date(2017, 6, 3);
return (
<View style={styles.container}>
<CalendarPicker
minDate={minDate}
maxDate={maxDate}
disabledDates={this.myDisabledDatesFunc}
onDateChange={this.onDateChange}
/>
</View>
);
}
// Note the inverted logic. Returning true disables a date.
// Moment docs for isBetween():
// https://momentjscom.readthedocs.io/en/latest/moment/05-query/06-is-between/
myDisabledDatesFunc(selectedDate) {
return !(selectedDate.isBetween(myStartRange, myEndRange, 'day');
}
@IbrahimSheikh24
Edit:
minDate
andmaxDate
may be an even easier solution to your problem. You shouldn't need to usedisabledDates
.You could pass a function to
disabledDates
. Here's a sample:render() { const minDate = new Date(); // Today const maxDate = new Date(2017, 6, 3); return ( <View style={styles.container}> <CalendarPicker minDate={minDate} maxDate={maxDate} disabledDates={this.myDisabledDatesFunc} onDateChange={this.onDateChange} /> </View> ); } // Note the inverted logic. Returning true disables a date. // Moment docs for isBetween(): // https://momentjscom.readthedocs.io/en/latest/moment/05-query/06-is-between/ myDisabledDatesFunc(selectedDate) { return !(selectedDate.isBetween(myStartRange, myEndRange, 'day'); }
Thanks for your answer. I am sorry I am not able to understand. I want to make some clarification on my requirement as below. I don't have all dates given between two dates. I have set of any dates like '2019-10-05', '2019-10-08', '2019-10-15', '2019-10-25', '2019-10-28', '2019-10-29'. My requirement is to enable only the dates I mentioned here and disable all the other dates. Pls give me solution which can solve this issue. Thanks
In that case, pass in a function to the disabledDates
prop and return false for only the dates that you want enabled. The logic is inverted because it's a "disabled" prop instead of "enabled".
The
disabledDates
prop also accepts a function. https://github.com/stephy/CalendarPicker#calendarpicker-propsIt's a simple matter of inverting the logic (return true for disabled, false for enabled). The inverted logic is an unfortunate historical decision.