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

Question

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.

Check this please https://codesandbox.io/s/p34o4v7wlj , is that what you are looking for? — Eugene Dzhevadov, Nov 23 '18 at 10:55
@EugeneDzhevadov If the currentDate or defaultDate is `Today` it works fine to me similar to , but if the defaultDate is something like in future as in my example I fail to achieve it. — iphonic, Nov 23 '18 at 11:00
So, `current` is passed from the component, my guess is that it is always today, but you can define a `default` value instead of `current` and do any logic more, less or equal, but I see the component display today date — Eugene Dzhevadov, Nov 23 '18 at 11:14

score 10 · Accepted Answer · answered Nov 23 '18 at 11:16

10

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

answered Nov 23 '18 at 11:16

Triyugi Narayan Mani

3,039
8
36
56

1

Great this seems to be working fine, I was calling the moment wrong way.. Thanks a ton. – iphonic Nov 23 '18 at 11:21
Than You, but i need in calendar date should be enabled only 7 days before current date – Arshad Oct 01 '20 at 11:03
current && current > moment() to disable future dates ;) – Shashank Shah Jan 17 '22 at 11:31

score 4 · Answer 2 · answered Sep 19 '20 at 12:49

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.

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

2 Answers2

Linked