feat: limit datetimes select to one day

src/components/order-form/form/date-time/helper.ts

@@ -0,0 +1,26 @@
+import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+
+dayjs.extend(customParseFormat);
+
+export const getMinDatetime = (dateTimeString: string, minDateTimeString: string) => {
+  const time = dayjs(dateTimeString);
+
+  const minDate = dayjs(minDateTimeString).format('YYYY-MM-DD');
+  const minTime = dayjs(minDateTimeString);
+
+  const newTime = (time && time.isAfter(minTime)) ? time : minTime;
+
+  return [minDate, newTime.format('HH:mm')].join('T');
+};
+
+export const getMaxDatetime = (dateTimeString: string, maxDateTimeString: string) => {
+  const time = dayjs(dateTimeString);
+
+  const maxDate = dayjs(maxDateTimeString).format('YYYY-MM-DD');
+  const maxTime = dayjs(maxDateTimeString);
+
+  const newTime = (time && time.isBefore(maxTime)) ? time : maxTime;
+
+  return [maxDate, newTime.format('HH:mm')].join('T');
+};

src/components/order-form/form/date-time/index.ts

@@ -1 +1,2 @@
-export { type DateTimeInputProps, DateTimeInput } from './date-time';
+export { type DateTimeInputProps, DateTimeInput } from './date-time';
+export { getMinDatetime, getMaxDatetime } from './helper';

src/components/order-form/form/order-form.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { Box, Flex, FormControl, FormLabel, VStack } from '@chakra-ui/react';
@@ -10,7 +10,7 @@ import { OrderFormProps, OrderFormValues } from './types';
 import { PhoneInput } from './phone';
 import { SubmitButton } from './submit';
 import { defaultValues, useGetValidationRules } from './helper';
-import { DateTimeInput } from './date-time';
+import { DateTimeInput, getMinDatetime, getMaxDatetime } from './date-time';
 import {
   LocationInput,
   MapComponent,
@@ -40,6 +40,19 @@ export const OrderForm = ({ onSubmit, loading, ...props }: OrderFormProps) => {
     'carLocation',
   ]);
 
+  useEffect(() => {
+    if (!availableDatetimeBegin) {
+      return;
+    }
+    setValue('availableDatetimeEnd', getMinDatetime(availableDatetimeEnd, availableDatetimeBegin));
+  }, [availableDatetimeBegin]);
+  useEffect(() => {
+    if (!availableDatetimeEnd) {
+      return;
+    }
+    setValue('availableDatetimeBegin', getMaxDatetime(availableDatetimeBegin, availableDatetimeEnd));
+  }, [availableDatetimeEnd]);
+
   return (
     <Box p={4} marginInline='auto' {...props}>
       <VStack