97 lines
4.1 KiB
JavaScript
97 lines
4.1 KiB
JavaScript
import ClearIcon from "@mui/icons-material/Clear";
|
|
import { Box, FormHelperText, IconButton, InputAdornment } from "@mui/material";
|
|
import { AdapterDateFnsJalali } from "@mui/x-date-pickers/AdapterDateFnsJalali";
|
|
import { faIR } from "@mui/x-date-pickers/locales";
|
|
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
|
|
import { MobileTimePicker } from "@mui/x-date-pickers/MobileTimePicker";
|
|
import { parseISO } from "date-fns";
|
|
|
|
const parseIfString = (val) =>
|
|
val instanceof Date ? val : typeof val === "string" && val !== "" ? parseISO(val) : null;
|
|
|
|
function MuiTimePicker({
|
|
value,
|
|
setFieldValue,
|
|
views = ["hours", "minutes"],
|
|
name,
|
|
minTime,
|
|
maxTime,
|
|
helperText,
|
|
placeholder,
|
|
error,
|
|
label,
|
|
}) {
|
|
// Ensure value, minTime, maxTime are Date objects
|
|
const parsedValue = parseIfString(value);
|
|
const parsedMinTime = parseIfString(minTime);
|
|
const parsedMaxTime = parseIfString(maxTime);
|
|
|
|
return (
|
|
<>
|
|
<Box sx={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center" }}>
|
|
<LocalizationProvider
|
|
dateAdapter={AdapterDateFnsJalali}
|
|
localeText={faIR.components.MuiLocalizationProvider.defaultProps.localeText}
|
|
>
|
|
<MobileTimePicker
|
|
value={parsedValue}
|
|
sx={{ width: "100%" }}
|
|
id={name}
|
|
closeOnSelect
|
|
label={label}
|
|
format="HH:mm"
|
|
ampm={false}
|
|
timeSteps={{ hours: 1, minutes: 5 }}
|
|
views={views}
|
|
name={name}
|
|
onChange={(newValue) => {
|
|
setFieldValue(name, newValue);
|
|
}}
|
|
minTime={parsedMinTime}
|
|
maxTime={parsedMaxTime}
|
|
slotProps={{
|
|
textField: {
|
|
placeholder: placeholder,
|
|
size: "small",
|
|
error: error,
|
|
InputLabelProps: {
|
|
shrink: true,
|
|
},
|
|
InputProps: {
|
|
endAdornment: (
|
|
<InputAdornment position="end">
|
|
<IconButton
|
|
size="small"
|
|
onClick={(event) => {
|
|
event.stopPropagation();
|
|
setFieldValue(name, "");
|
|
}}
|
|
sx={{
|
|
color: "#bfbfbf",
|
|
"&:hover": {
|
|
backgroundColor: "rgba(189, 189, 189, 0.1)",
|
|
color: "#363434",
|
|
},
|
|
}}
|
|
>
|
|
<ClearIcon />
|
|
</IconButton>
|
|
</InputAdornment>
|
|
),
|
|
},
|
|
},
|
|
}}
|
|
/>
|
|
</LocalizationProvider>
|
|
</Box>
|
|
{helperText && (
|
|
<FormHelperText id="component-helper-text" sx={{ color: error ? "#d32f2f" : "unset", ml: 2 }}>
|
|
{helperText}
|
|
</FormHelperText>
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default MuiTimePicker;
|