Changing a react-datetime-picker input to not allow past dates

Question

I have 2 DateTimePicker objects on my form, one for start time and one for end time ... At the moment they work perfect, but i am able to choose an end time that is behind the start time ... When i do this my calculations error. Is there any way to change the end_time picker to match the start_time picker after its been selected, and not allow it to choose date time before the start_time?

<Controller
    control={control}
    name='start_time'
    defaultValue={new Date(now.toLocaleString('en-US', { timeZone: timezone }))}
    render={({ field: { onChange, value } }) => (
        <DateTimePicker
            onChange={onChange}
            value={value ? new Date(value) : null}
            format="dd-MM-y h:mm a"
        />
    )}
/>




<Controller
    control={control}
    name='end_time'
    defaultValue={new Date(now.toLocaleString('en-US', { timeZone: timezone }))}
    render={({ field: { onChange, value } }) => (
        <DateTimePicker
            onChange={onChange}
            value={value ? new Date(value) : null}
            format="dd-MM-y h:mm a"
        />
    )}
/>

deekep · Accepted Answer · 2023-08-13 16:50:44Z

0

Use the minimumDate

<DateTimePicker
   onChange={onChange}
   value={value ? new Date(value) : null}
   format="dd-MM-y h:mm a"
   minimumDate=/* your start date */
/>

UPD: Replying to your first comment:

To change the minimumDate after changing the start date, you can do the following:

const [startTime, setStartTime] = useState(new Date());
const [endTime, setEndTime] = useState(new Date());

const minEndTime = startTime;

<DateTimePicker
     value={startTime}
     onChange={(_, newStartTime) => {
       setStartTime(newStartTime);

       // Update the minimum date for the end time picker
       setEndTime((prevEndTime) => {
         if (prevEndTime < newStartTime) {
           return newStartTime;
         }
         return prevEndTime;
       });
     }}
     format="dd-MM-y h:mm a"
/>
...
<DateTimePicker
     value={endTime}
     onChange={(_, newEndTime) => {
        if (newEndTime >= startTime) {
          setEndTime(newEndTime);
        }
     }}
     minimumDate={minEndTime}
     format="dd-MM-y h:mm a"
/>

https://wix.github.io/react-native-ui-lib/docs/components/form/DateTimePicker#minimumdate

edited Aug 13, 2023 at 16:50

answered Aug 13, 2023 at 15:58

deekep

1611 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

BigJobbies Over a year ago

How would that work if i wanted the end_date to be minimumDate of after the start_date has been choosen if they are on the same page?

deekep Over a year ago

Change the second DateTimePicker after the date in the first one has changed

Collectives™ on Stack Overflow

Changing a react-datetime-picker input to not allow past dates

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related