-1

I want users to be unable to select the same date for start and end. For example if user selects 30/06/2022 for start date then he can select only 01/07/2022 or further. Could not find anything in the API

howard wolowitz
  • 477
  • 5
  • 21
  • 1
    Does this answer your question? [Compare two dates with JavaScript](https://stackoverflow.com/questions/492994/compare-two-dates-with-javascript) – Arun Sudhakaran Jun 30 '22 at 05:58
  • of course not, i know how to compare date but dont know how to do it within range picker – howard wolowitz Jun 30 '22 at 06:01
  • https://stackoverflow.com/questions/15757918/disable-past-dates-on-datepicker – Arun Sudhakaran Jun 30 '22 at 06:09
  • Do you get what i am saying ? i want to disable choosing the same date for start and end dude – howard wolowitz Jun 30 '22 at 06:11
  • 2
    Bro, I'm giving you some options/suggestions. I'm not giving you ready-made answers, so it will be better if you can do some changes to those suggestions to get what you want. My first comment was suggesting you to validate the dates either on form submission or at any event change. The second one is directly related to a date picker so that you can tweak that answer and try to achieve what you want. – Arun Sudhakaran Jun 30 '22 at 06:51

2 Answers2

1
const App = () => {
  const [startDate, setStartDate] = useState();

  return (
    <RangePicker
      onCalendarChange={(dates) => {
        setStartDate(dates?.[0]);
      }}
      disabledDate={(currentDate) => currentDate.isSame(startDate)}
    />
  );
};

codesandbox.io

Edshav
  • 378
  • 1
  • 8
1

The answer above allows selecting same date when user starting doing so from the 2nd input ( end date )

The enhanced code can look like this:

    disabledDate={(current) => ((startDate && current.isSame(startDate, 'day')) || (endDate && current.isSame(endDate, 'day')))}

But, here comes the limitation of this method of the antd range picker which is related to not showing which input was triggered ( start or end date ). So for example, I have selected May 22 - May 25 Range and decide to select May 22 - May 30. In this case, I must click only on 2nd input, because 1st input is gonna block May 22 from selection and won't allow to proceed further.

Max T
  • 15
  • 4