0
572
VistasLa interfaz de usuario del material no puede controlar el error DatePicker
Tengo un problema con el DatePicker, si hay un valor vacío es rojo. Y pasar verdadero/falso a error no tiene ningún efecto.
Incluso intenté pasar el error al TextField no cambia nada.
¿Cómo puedo controlar cuándo muestra un borde rojo y un error, como puedo hacerlo con cualquier otro elemento de formulario de 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
Esto mismo es lo que me preocupa.
Esta es probablemente la misma función básica que el selector. Así que hice esto.
accesorios de error es texto de mensaje de error simple.
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