reactjs DateTimePicker MUI显示的不是传递的值,而是时区React的错误值

n6lpvg4x  于 2022-11-04  发布在  React
关注(0)|答案(1)|浏览(110)

我正在从'@mui/x-date-pickers/DateTimePicker'传递一个值给DateTimePicker组件,但是显示的值与传递的值不同。它显示+2小时,有时显示+1小时(我猜是与时区有关)
示例:要传递的值:'2022年9月26日星期一11:54:22 GMT+0000'(用于ikField.value)
显示内容:

<DateTimePicker
                        label={label}
                        value={formikField.value}
                        disabled={disabled}
                        onChange={(newValue) => {
                            helpers.setValue(newValue);
                        }}
                        renderInput={(params) => (
                            <TextField {...params} {...field} fullWidth error={meta.touched && Boolean(meta.error)} helperText={meta.error} />
                        )}
                        minDate={props.minDate ?? null}
                    />
2guxujil

2guxujil1#

如MUI Pro文档中所述,您需要将日期选择器组件 Package 在本地化提供程序中。您需要选择要使用的提供程序,并将其作为属性传递给本地化提供程序。
您可以在此处阅读更多信息:MUI datepicker
示例中代码片段:

import * as React from 'react';
import dayjs, { Dayjs } from 'dayjs';
import TextField from '@mui/material/TextField';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import updateLocale from "dayjs/plugin/updateLocale";
import nl from "dayjs/locale/nl";
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
dayjs.extend(updateLocale);
dayjs.updateLocale("nl", { weekStart: 0 });
dayjs.locale("nl");

export default function BasicDateTimePicker() {
  const [value, setValue] = React.useState<Dayjs | null>(dayjs());

  return (
    <LocalizationProvider locale={nl} dateAdapter={AdapterDayjs}>
      <DateTimePicker
        renderInput={(props) => <TextField {...props} />}
        label="DateTimePicker"
        value={value}
        onChange={(newValue) => {
          setValue(newValue);
        }}
      />
    </LocalizationProvider>
  );
}

相关问题