3
votes

i'm using ant UI for my react app, there i have a date picker.i want disable dates before current date and after 1 month of current date.
my datepicker

<DatePicker
     defaultValue={moment()}
     format={dateFormat}
     className="datePicker"
     onChange={dateHandler}
     ref={(dateSelect) => { this.dateSelect = dateSelect }}
     disabledDate={(current) => {
         return moment().add(-1, 'days')  >= current && 
              moment().add(1, 'month')  <= current;
         }}
     onFocus={this.rideDateGA}
/>

here if I return moment().add(-1, 'days') >= current then it is disabled previous dates from todays date but it is not disabling month after dates.
same as if I return moment().add(1, 'month') <= current then i'm able to disabled next month dates.
my problem i'm unable to return both values.
how can i disable previous dates and next month dates

2
I have solved it using this solution: stackoverflow.com/a/68923354/14249303 - Ephrem Demelash
I have solved it using this solution: stackoverflow.com/a/68923354/14249303 - Ephrem Demelash

2 Answers

7
votes

For the dates to be disabled, you need it to run through both these conditions.

When the condition is:

moment().add(-1, 'days')  >= current && moment().add(1, 'month')  <= current;

The condition returns false, when the first moment().add(-1, 'days') >= current is false, which is why you see that the days before current date are correctly disabled.

For condition to be correct, you need:

<DatePicker
  defaultValue={moment()}
  format={dateFormat}
  className="datePicker"
  onChange={dateHandler}
  ref={(dateSelect) => { this.dateSelect = dateSelect }}
  disabledDate={(current) => {
     return moment().add(-1, 'days')  >= current ||
          moment().add(1, 'month')  <= current;
     }}
  onFocus={this.rideDateGA}
/>
3
votes

To Disable before current date and after 1 month of current date, below is the code.

disabledSubmissionDate = (submissionValue) => {
    if (!submissionValue) {
        return false;
    }
    return (submissionValue.valueOf() < Date.now()) || (submissionValue.valueOf() >= moment().add(1, 'month'));
}


<DatePicker disabledDate={this.disabledSubmissionDate} onChange=this.SubmissionDateOnChange} />