javascript - MUI Material-UI DatePicker格式化和设置默认值问题

Question

我遇到了一些问题，但我一直没能找到解决方案。MUI DatePicker 似乎有一种默认格式，用于将日期显示为

Fri Oct dd yyyy HH:MM:SS GMT+HHMM (name of timezone here)

但是，我需要能够以以下格式传递日期

yyyy-MM-ddThh:MM:ss+HH:mm 即 (Date)T(Time)+(Timezone)

到组件，然后返回以相同的格式提交。

在某些情况下，此日期时间选择器的值未设置，但在某些情况下已设置。而且我不确定如何获得我需要的格式，因为我无法控制我收到的日期格式。

组件似乎可以解析我给它的数据，并设置正确的值，但新数据(如果值发生变化)的格式不同。

编辑:上面只是一个简单的例子。

Data I get: 2020-10-11T15:56:28+11:00

组件输出的数据:{ "$L": "en", "$u": undefined, "$d": Date Sun Oct 11 2020 15:56:28 GMT+1100(澳大利亚东部夏令时时间)，“$x”:{}，“$y”:2020，“$M”:9，“$D”:11，“$W”:0，“$H”:15，“$m” : 56, …}

DateTimePicker相关代码:

import React from 'react';
import TextField from '@mui/material/TextField';
import DateTimePicker from '@mui/lab/DateTimePicker';

export default function DateTimePickerComponent(props) {
    const [value, setValue] = React.useState(null);
    const onDatePicked = (event) => {
        setValue(event);
        let onlyDate = event.$d;
        props.onChange(onlyDate);
        console.log("Date Changed", event, onlyDate);
    };

    React.useEffect(() => {
        if (props.initialValue !== 0 && value === null) {
            setValue(props.initialValue);
            console.log("Initial Date is", props.initialValue);
        }
    }, [props.initialValue, value, setValue]);

    return (
        <DateTimePicker
            label={props.label}
            value={value}
            onChange={onDatePicked}
            renderInput={(params) => <TextField {...params} />}
        />
    );
}

Answer 1

要格式化日期，请使用 inputFormat 属性。如果您使用的是 date-fns，您可以看到 this table了解如何自定义格式字符串:

<DateTimePicker
  label={props.label}
  value={value}
  inputFormat="E MMM dd yyyy HH:MM:SS O"
  onChange={setValue}
  renderInput={(params) => <TextField {...params} fullWidth />}
/>

如果要在使用受控模式的组件中设置初始值，则必须在 useState 中对其进行初始化:

const [value, setValue] = React.useState(initialDate);