Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 | 38x 6x 6x 6x 6x 6x | import { SxProps } from "@mui/material";
import { Controller, useFormContext } from "react-hook-form";
import { Picker } from "./Picker";
import CustomToolbar from "./components/CustomToolbar";
import { useState } from "react";
import { ButtonProps } from "@shared/Button/GiveButton.types";
import { LocalizationProvider } from "@mui/x-date-pickers";
import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment";
import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
type TGiveDatePicker = {
/** Label for the date picker input */
label?: string;
/** Callback function called when the date changes. It can be used to get the selected date */
onSetDate: (date: any) => void;
/** Minimum selectable date */
minDate?: any;
/** Maximum selectable date */
maxDate?: any;
/** If true, disables selection of future dates */
disableFuture?: boolean;
/** If true, disables selection of past dates */
disablePast?: boolean;
/** Custom styles for the text field */
textFieldSx?: SxProps;
/** Custom styles for the dialog component (used in popup variant) */
customDialogSx?: any;
/** If true, disables the date picker */
disabled?: boolean;
/** Placeholder for the date picker input */
placeholder?: string;
/** RHF field name */
name?: string;
/** Ok / Apply Button props */
submitButtonProps?: ButtonProps;
openYear?: boolean;
hidePlaceholder?: boolean;
useUTCMoment?: boolean;
};
const GiveDatePicker = ({
label,
onSetDate,
minDate,
maxDate,
disableFuture,
disablePast,
textFieldSx,
customDialogSx,
disabled,
placeholder = "mm/dd/yyyy",
name = "date",
submitButtonProps,
openYear,
hidePlaceholder,
useUTCMoment,
}: TGiveDatePicker) => {
const { control } = useFormContext();
const [tempValue, setTempValue] = useState<string | null>("");
const handleClickAccept = (value: any) => {
setTempValue(value);
if (onSetDate) {
onSetDate(value);
}
};
return (
<LocalizationProvider
dateAdapter={useUTCMoment ? AdapterMoment : AdapterDateFns}
>
<Controller
name={name}
control={control}
render={({ field, fieldState: { error } }) => {
return (
<Picker
label={label}
onSetDate={onSetDate}
minDate={minDate}
maxDate={maxDate}
disableFuture={disableFuture}
disablePast={disablePast}
textFieldSx={textFieldSx}
customDialogSx={customDialogSx}
disabled={disabled}
placeholder={placeholder}
error={error}
field={{ ...field, ...(openYear && { openTo: "year" }) }}
handleClickAccept={handleClickAccept}
tempValue={tempValue}
submitButtonProps={submitButtonProps}
hidePlaceholder={hidePlaceholder}
ToolbarComponent={() => (
<CustomToolbar date={field.value || new Date()} />
)}
useUTCMoment={useUTCMoment}
/>
);
}}
/>
</LocalizationProvider>
);
};
export default GiveDatePicker;
|