0
570
VistasMaterial UI unable to control the DatePicker error
I have a problem with the DatePicker, if there is an empty value it's red.
And passing true/false to error doesn't have any effect.
I even tried passing error to the TextField doesn't change anything.
How can I control when it displays a red border and an error, like I can with any other form element from MUI?
<FormControl sx={{ minWidth: { xs: 230, sm: 300, md: 120 } }}>
<LocalizationProvider
dateAdapter={AdapterDateFns}
locale={mkLocale}
>
<MobileDatePicker
disableElevation
mode="landscape"
mask={"__.__.____ __:__"}
disableFuture
error={false}
hintText="Portrait Dialog"
errorText="This is an error message."
label="Роденден"
floatingLabelText="Роденден"
inputFormat="dd/MM/yyyy"
value={form.birthday.date}
disabled={form.birthday.disabled}
okText="Избери"
openTo="year"
todayText="Денес"
toolbarTitle="Избери датум"
cancelText="Откажи"
views={["year", "month", "day"]}
onChange={handleFormBirthday}
renderInput={(params) => (
<TextField error={form.birthday.error} {...params} />
)}
allowSameDateSelection={false}
disableHighlightToday={true}
showTodayButton={false}
showToolbar={false}
maxDate={dateMax}
/>
<FormHelperText error={form.birthday.error}>
{form.birthday.message}
</FormHelperText>
</LocalizationProvider>
</FormControl>
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
This is the same thing that worries me.
This is probably the same basic function as the picker. So I did this.
error props is simple error message text.
import { FormControl, FormHelperText, TextField, Box } from "@mui/material";
import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
import { DatePicker } from "@mui/x-date-pickers/DatePicker";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import enLocale from "date-fns/locale/en-US";
import koLocale from "date-fns/locale/ko";
import React, { forwardRef } from "react";
const localeMap = {
ko: koLocale,
en: enLocale,
};
const maskMap = {
ko: "____-__-__",
en: "__/__/____",
};
const inputMap = {
ko: "yyyy-MM-dd",
en: "dd/MM/yyyy",
};
const _ = forwardRef(
(
{
fullWidth = true,
size = "small",
locale = "ko",
name,
value,
onChange,
onBlur,
error = null,
helperText,
},
ref
) => {
return (
<FormControl fullWidth={fullWidth} error={!!error}>
<LocalizationProvider
dateAdapter={AdapterDateFns}
locale={localeMap[locale]}
>
<DatePicker
inputRef={ref}
name={name}
size={size}
mask={maskMap[locale]}
inputFormat={inputMap[locale]}
value={value}
onChange={(newValue) =>
onChange({ target: { name, value: newValue } })
}
renderInput={(params) => (
<TextField
{...params}
name={name}
size={size}
onBlur={onBlur}
error={!!error}
/>
)}
/>
</LocalizationProvider>
{!!error ? (
<FormHelperText>{error}</FormHelperText>
) : (
!!helperText && <FormHelperText>{helperText}</FormHelperText>
)}
</FormControl>
);
}
);
export default _;
·
Juan Pablo Isaza
Denunciar
Responde la pregunta