57 lines
1.6 KiB
TypeScript
57 lines
1.6 KiB
TypeScript
// form
|
|
import { useFormContext, Controller } from 'react-hook-form';
|
|
// @mui
|
|
import { FormHelperText, TextField } from '@mui/material';
|
|
import { DesktopDatePicker, LocalizationProvider } from '@mui/lab';
|
|
import AdapterDateFns from '@mui/lab/AdapterDateFns';
|
|
|
|
// ----------------------------------------------------------------------
|
|
|
|
interface IProps {
|
|
name: string;
|
|
label: string;
|
|
dateFormat: string;
|
|
fullWidth?: boolean;
|
|
minDate?: any;
|
|
maxDate?: any;
|
|
disabled?: boolean;
|
|
}
|
|
|
|
export default function RHFDatePicker({ name, label, dateFormat, minDate, maxDate, disabled, ...other }: IProps) {
|
|
const { control } = useFormContext();
|
|
|
|
const { fullWidth } = other;
|
|
|
|
return (
|
|
<LocalizationProvider dateAdapter={AdapterDateFns}>
|
|
<Controller
|
|
name={name}
|
|
control={control}
|
|
render={({ field, fieldState: { error } }) => (
|
|
<>
|
|
<DesktopDatePicker
|
|
disabled={disabled}
|
|
label={label}
|
|
onChange={(date)=> field.onChange(date)}
|
|
inputFormat={dateFormat}
|
|
value={field.value}
|
|
mask={''}
|
|
minDate={(minDate) ? new Date(minDate) : null}
|
|
maxDate={(maxDate) ? new Date(maxDate) : null}
|
|
renderInput={(params) => <TextField
|
|
fullWidth={fullWidth}
|
|
{...params}
|
|
/>}
|
|
/>
|
|
{!!error && (
|
|
<FormHelperText error sx={{ px: 2 }}>
|
|
{error.message}
|
|
</FormHelperText>
|
|
)}
|
|
</>
|
|
)}
|
|
/>
|
|
</LocalizationProvider>
|
|
);
|
|
}
|