reactjs 在MUI DatePicker中自定义月份名称

ztigrdn8  于 2022-11-29  发布在  React
关注(0)|答案(1)|浏览(159)

有没有办法将月份名称格式从3个字更改为全名?
this is what i have now
例如,MUI响应日期选择器显示:
一月-二月-三月-四月-五月
我希望它是像一月-二月-三月等等。
我已经将日期选择器本地化为Jalali,但它只显示月份名称的前3个单词。

<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>
eaf3rand

eaf3rand1#

您需要添加dateFormats来显示月份的全名。

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

相关问题