CODEWITHSUNDEEP
reactjsdatematerial-ui
Marin
Marin

Reputation: 191

how change the dateformat of DatePicker - Material-UI (React)

I'm using the datepicker from Material-UI, but the actual format is "mm/dd/yyyy" and I need to change that to "dd/mm/yyyy", how can I do it?

the component:

 <LocalizationProvider  dateAdapter={AdapterDateFns}>
      <DatePicker
        onError={(e) => {
          setError(true);
        }}
        label="Date"
        value={infos.date}
        onChange={(newValue) => {
          setInfos({ ...infos, date: newValue });

          setError(false);
        }}
        renderInput={(params) => (
          <TextField
            color={error ? "error" : "primary"}
            required
            error={error}
            helperText={error ? messageError.date : ""}
            {...params}
          />
        )}
      />
    </LocalizationProvider>

Upvotes: 1

Views: 7422

Answers (1)

Wasim Abuzaher
Wasim Abuzaher

Reputation: 814

try inputFormat:

<LocalizationProvider  dateAdapter={AdapterDateFns}>
      <DatePicker
        inputFormat="dd/MM/yyyy"
        onError={(e) => {
          setError(true);
        }}
        label="Date"
        value={infos.date}
        onChange={(newValue) => {
          setInfos({ ...infos, date: newValue });

          setError(false);
        }}
        renderInput={(params) => (
          <TextField
            color={error ? "error" : "primary"}
            required
            error={error}
            helperText={error ? messageError.date : ""}
            {...params}
          />
        )}
      />
    </LocalizationProvider>

Upvotes: 5

Related Questions