CODEWITHSUNDEEP
javascriptreactjsantdant-design-pro
iphonic
iphonic

Reputation: 12717

ReactJS Ant Design - Disable dates less than any default date in DatePicker

Working on antd framework, I am trying to disable the DatePicker date which are less than given defaultDate, I am not able to get it right by any means. The situation is say defaultDate of the Date Picker is 2028-12-20 all dates should be disabled below this..

The callback to do this is as follows

disabledDate = (current) => {
    return current && current < moment().endOf('day');;
}

where current = defaultDate which has been provided it doesn't change, I am not sure how to do this..

I have create a SandBox here

Any help would be highly appreciated.

Thanks.

Upvotes: 5

Views: 11746

Answers (2)

Majedur
Majedur

Reputation: 3242

In addition, you can disable date with enable your available date range / slot.

npm install date-fns

Package for add or sub days.

import {subDays, addDays } from 'date-fns'

Final code

<DatePicker 
disabledDate={d => !d || d.isAfter(addDays( new Date(), 7)) || d.isSameOrBefore(subDays( new Date(), 1)) }/>

Hope it's helpful.

Upvotes: 4

Triyugi Narayan Mani
Triyugi Narayan Mani

Reputation: 3109

It can be done in following way:

disabledDate(current) {
  let customDate = "2018-11-25";
  return current && current < moment(customDate, "YYYY-MM-DD");
}

Here is the working demo

Upvotes: 10

Related Questions