import React, { useCallback, useState } from 'react';
import { DateRangePicker } from '@mui/lab';
import { Box, Button, Grid, TextField } from '@mui/material';
import { Controller, useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import FilterAltIcon from '@mui/icons-material/FilterAlt';
import { mt } from '../../../common/common.styled';
import { Modal } from '../../../common/ui';
import { yup } from '../../../app/core';
import { Styled } from './RangeData.styled';
type RangeData = {
startEndData: unknown;
};
const defaultValues = {
startEndData: ['', ''],
};
const schema = yup.object().shape({
startEndData: yup
.array()
.of(yup.string())
.required('Выберите дату ')
.test('', 'Выберите дату ', function (startEndData) {
return !(!startEndData[0] || !startEndData[1]);
}),
});
const RangeDate: React.FC = () => {
const [open, setOpen] = useState(false);
const handleClose = useCallback(() => {
setOpen(false);
}, []);
const handleOpen = useCallback(() => setOpen(true), []);
const {
handleSubmit,
control,
reset,
formState: { errors },
} = useForm<RangeData>({ defaultValues, resolver: yupResolver(schema) });
const handleCreateRangeDate = handleSubmit((data: RangeData) => {
console.log(data, 'data');
});
return (
<Styled.Root>
<Grid>
<Button color="primary" onClick={handleOpen} variant="contained">
Выберите диапазон <FilterAltIcon />
</Button>
<Modal open={open} onClose={handleClose} title={' Выберите диапазон '}>
<form onSubmit={handleCreateRangeDate}>
<Controller
control={control}
name="startEndData"
render={({ field: { value, onChange } }) => (
<DateRangePicker
startText="Начальная дата"
endText="Конечная дата"
error={Boolean(errors.startEndData?.message)}
value={value}
onChange={onChange}
renderInput={(startProps, endProps) => (
<React.Fragment>
<TextField {...startProps} />
<Box sx={{ mx: 2 }}> До </Box>
<TextField {...endProps} />
</React.Fragment>
)}
/>
)}
/>
<Grid>
<Button css={mt(25)} variant="contained" color="primary" size="medium" type="submit">
Подтвердить
</Button>
</Grid>
</form>
</Modal>
</Grid>
</Styled.Root>
);
};
export default RangeDate;
введите сюда код