stephy / CalendarPicker

CalendarPicker Component for React Native
800 stars 371 forks source link

Is there enableDates props like disableDates? #167

Closed Saad-Bashar closed 4 years ago

peacechen commented 4 years ago

The disabledDates prop also accepts a function. https://github.com/stephy/CalendarPicker#calendarpicker-props

It's a simple matter of inverting the logic (return true for disabled, false for enabled). The inverted logic is an unfortunate historical decision.

IbrahimSheikh24 commented 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?

peacechen commented 4 years ago

@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 commented 4 years ago

@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');
  }

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

peacechen commented 4 years ago

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".