Search code examples
reactjsdatedatepickerantd

disable dates before current date and after 1 month of current date in antd date picker


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


Solution

  • 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}
    />