CODEWITHSUNDEEP
reactjsdatedatepickerantd
zulqarnain
zulqarnain

Reputation: 1626

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

Upvotes: 8

Views: 21147

Answers (3)

Danielprabhakaran N
Danielprabhakaran N

Reputation: 585

In my scenario, the User shouldn't select future dates. From the start date, one month they can select, but not future dates. I used the below code, It worked for me. maybe it will be used for someone.

import React, { useState } from 'react';
import { DatePicker } from 'antd';

const { RangePicker } = DatePicker;

const App = () => {
  const [dates, setDates] = useState([]);
  const [hackValue, setHackValue] = useState();
  const [value, setValue] = useState();
  const disabledDate = current => {
    if (!dates || dates.length === 0) {
      return false;
    }
    const tooLate = dates[0] && current.diff(dates[0], 'month') >= 1; // start date to one month
    const tooEarly = current.isSameOrAfter(moment()); // untill today
    return tooEarly || tooLate;
  };

  const onOpenChange = open => {
    if (open) {
      setHackValue([]);
      setDates([]);
    } else {
      setHackValue(undefined);
    }
  };

  return (
    <RangePicker
      value={hackValue || value}
      disabledDate={disabledDate}
      onCalendarChange={val => setDates(val)}
      onChange={val => setValue(val)}
      onOpenChange={onOpenChange}
    />
  );
};

ReactDOM.render(<App />, mountNode);

Ref: https://ant.design/components/date-picker/#components-date-picker-demo-select-in-range

(This example will work for 7 days.)

Upvotes: 0

sunil ts
sunil ts

Reputation: 255

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

Upvotes: 5

Agney
Agney

Reputation: 19204

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

Upvotes: 18

Related Questions