feat: limit datetimes select to one day

This commit is contained in:
RustamRu 2025-03-20 11:54:25 +03:00
parent 771ea1d39b
commit 05e98b7afe
3 changed files with 43 additions and 3 deletions

View 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');
};

View File

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

View File

@ -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