reactjsmaterial-uidatepickermui-x-date-picker

Customize month names in MUI X Date Picker


Is there any way to change the month name format from 3 words to full name?

this is what i have now

for example mui responsive datepicker shows:

Jan - Feb - Mar - Apr - May

I want it to be like January - February - March and so on.

I've already localized date picker to Jalali but it only displays first 3 words of the month name.

 <LocalizationProvider dateAdapter={AdapterJalali}>
  <DatePicker
    PopperProps={{
      sx: popperSx,
    }}
    open={isForcePickerOpen}
    onClose={() => setIsOpen(false)}
    components={{
      OpenPickerIcon: "a",
    }}
    className="relative"
    disableFuture
    label="Responsive"
    minDate={minDate ? moment(minDate, "MM-DD-YYYY").toDate() : undefined}
    maxDate={maxDate ? moment(maxDate, "MM-DD-YYYY").toDate() : undefined}
    openTo="year"
    views={views}
    value={value}
    onChange={onChange}
    renderInput={({ inputRef, inputProps, InputProps }) => (
      <div
        variant="outlined"
        color="primary"
        onTouchStart={() => setIsOpen((isOpen) => !isOpen)}
        onClick={() => setIsOpen((isOpen) => !isOpen)}
        ref={inputRef}
        {...inputProps}
        className="relative flex flex-row justify-between p-2 h-14 items-center text-immigoTextGray
                       border-1 border-gray-400 w-full rounded-lg  "
      >
        <input
          readOnly
          className="absolute disabled -z-30"
          disabled
          hidden
        />
        {/* {InputProps?.endAdornment} */}
        <span className="font-dana-regular text-xs">{label}</span>

        <span className=" px-2 font-dana-regular text-base text-gray-800">
          {faData}
        </span>
        <CalendarMonthIcon />

        {/* <div  >
          </div>
         <div  className='disabled'>
          
         </div> */}
      </div>
    )}
  />
</LocalizationProvider>

Solution

  • you need add dateFormats To display the full name of the month.

    <LocalizationProvider dateAdapter={AdapterJalali} dateFormats={{ monthShort: 'MMMM' }}>
      // datepicker
    </LocalizationProvider>