feat: limit datetimes select to one day
This commit is contained in:
parent
771ea1d39b
commit
05e98b7afe
26
src/components/order-form/form/date-time/helper.ts
Normal file
26
src/components/order-form/form/date-time/helper.ts
Normal file
@ -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');
|
||||
};
|
@ -1 +1,2 @@
|
||||
export { type DateTimeInputProps, DateTimeInput } from './date-time';
|
||||
export { type DateTimeInputProps, DateTimeInput } from './date-time';
|
||||
export { getMinDatetime, getMaxDatetime } from './helper';
|
@ -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
|
||||
|
Loading…
x
Reference in New Issue
Block a user