How to set enddate to null if startdate is set before prevstartdate using react?

Question

i want to allow user to select the start and end dates on the calendar. i am using react-dates for this.

i want it to work like below

initially start and enddates will be null. on first click when user selects start date say 10th oct then enddate is also set to startdate (10th oct) and dates before start date 10th oct and dates after 6 weeks from the start date are disabled for seletion now when user selects enddate say 13th oct end date is set to 13th oct and the dates that were disabled will be enabled after selecting end date.

now when user clicks 15th oct this is set as start date n end date and dates before start date 15th oct and dates after 6 weeks from the start date are disabled for seletion when user clicks 17th oct as end date that is set as end date and the dates that were disabled will be enabled after selecting end date. the above mentioned works. but user does the below it doesnt work as expected and i need a fix for this. user has start date set to 15th oct and end date set to 17th oct now selects startdate 13th october.

expected: at this point i expect it to set the start and end dates to 13th oct and disable dates before 13th oct and the dates after 6 weeks from 13th oct are also disabled and wait for user to input enddate.

result but it sets 13th oct as start date and 17th oct as enddate.

basically when user has set some start and end dates and selects a date before startdate, the enddate should be set to new startdate and the dates before new startdate and dates after 6 weeks from new startdate should be disabled. and user clicking on another date after startdate should be set as end date.

below is the working example of my code

https://codesandbox.io/s/react-dates-forked-skrj2?file=/src/index.js

could someone help me with this. thanks.

Answer 1

I think you can do simply by using useEffect. You need two things for that:

1. First track start date value if value has changed from start one then it means you selected again start date for that you can create custom previous hook:

  // The ref object is a generic container whose current property is mutable ...
  // ... and can hold any value, similar to an instance property on a class
  const ref = useRef();
  
  // Store current value in ref
  useEffect(() => {
    ref.current = value;
  }, [value]); // Only re-run if value changes
  
  // Return previous value (happens before update in useEffect above)
  return ref.current;
}

2. Now compare if prevDate is not equal to new start date it means value has changed. Update end date. For this you need React.useEffect

const prevDate = usePrevious(startDate);

  React.useEffect(() => {
    if (prevDate && !moment(prevDate).isSame(startDate)) {
      setEndDate(startDate);
    }
  }, [startDate, endDate, prevDate]);

You can find demo here: https://codesandbox.io/s/react-dates-forked-xz0pk?file=/src/index.js:2469-2668