Material UI unable to control the DatePicker error

Question

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>

Answer 1

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 _;