更改 MUI 日期选择器默认值

Question

我正在使用

@mui/x-date-pickers

版本

^6.17.0

。

这是我的日期选择器

当我单击输入字段时，占位符会发生变化并添加值。我无法更改输入值。

我的整个代码

import { useRef, useState } from 'react';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
import { Controller } from 'react-hook-form';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { az, enUS } from 'date-fns/locale';
import { useTranslation } from 'react-i18next';

const DatePickerMui = ({
  name,
  title,
  value,
  minDate,
  maxDate,
  control,
  myChange,
  isClearable,
  time = false,
  disabled = false,
  defaultValue = null,
  dateFormat = time ? 'dd-MM-yyyy hh:mm' : 'dd-MM-yyyy',
  views = time ? ['year', 'month', 'day', 'hours', 'minutes'] : ['year', 'month', 'day'],
}) => {
  const [open, setOpen] = useState(false);
  const { i18n, t } = useTranslation();

  return (
    <div className="form-group date-component">
      <label style={{ marginBottom: '5px', display: 'block' }}>{title}</label>
      <Controller
        control={control}
        name={name}
        defaultValue={defaultValue}
        render={({ field }) => {
          return (
            <LocalizationProvider
              dateAdapter={AdapterDateFns}
              adapterLocale={i18n.language === 'az' ? az : enUS}
            >
                <DateTimePicker
                  open={open}
                  onOpen={() => setOpen(true)}
                  onClose={() => setOpen(false)}
                  control={control}
                  onChange={newValue => {
                    field.onChange(newValue);
                    if (myChange) {
                      myChange(newValue);
                    }
                  }}
                  format={dateFormat}
                  minDate={minDate}
                  disabled={disabled}
                  maxDate={maxDate}
                  views={views}
                  slotProps={{
                    field: { clearable: disabled ? false : isClearable ? true : false },
                    textField: {
                      placeholder: t('datePlaceholder') // gg-aa-iiii ss:dd,
                      onClick: () => setOpen(true),
                    },
                  }}
                />
            </LocalizationProvider>
          );
        }}
      />
    </div>
  );
};

export default DatePickerMui;

我也试过了，但是不行

          slotProps={{
                    field: { clearable: disabled ? false : isClearable ? true : false },
                    textField: {
                      onClick: () => setOpen(true),
                      placeholder: t('datePlaceholder'),
                      value: t('datePlaceholder'),
                      defaultValue: t('datePlaceholder'),
                    },
                  }}

Answer 1

您可以使用

localeText

属性覆盖所有选择器的 localeText：

const AZLocale = {
    fieldYearPlaceholder: (digitAmount) => "iiii".substring(digitAmount),
    fieldMonthPlaceholder: (contentType) => contentType === "letter" ? "AAAA" : "aa",
    fieldDayPlaceholder: () => "gg",
    fieldWeekDayPlaceholder: (params) => params.contentType === "letter" ? "EEEE" : "EE",
    fieldHoursPlaceholder: () => "ss",
    fieldMinutesPlaceholder: () => "dd",
}

<DateTimePicker
    label="Basic date time picker"
    format="DD-MM-YYYY hh:mm"
    defaultValue={null}
    localeText={AZLocale}
/>

但是，您似乎正在更改本地化的占位符。我建议通过 LocalizationProvider 翻译 UI。

<LocalizationProvider
  dateAdapter={AdapterDateFns}
  adapterLocale={i18n.language === "az" ? az : enUS}
  localeText={AZLocale}
>