React + Material、Datepickers和Luxon输出格式

Question

我正在使用React表单、Material和Luxon开发一个用于数据解析的React应用程序。

我已经使许多表单字段可重用，并且都很好地工作，但是在DatePickers和输出格式方面有一些问题。

基本上，我希望获得输出的DatePicker和TimePicker的值，并将其正确格式化以发送到后端。

我有以下几个组成部分：

DatePicker：

import React from "react";
import PropTypes from "prop-types";
import {Controller, useFormContext} from "react-hook-form";
import DatePicker from '@mui/lab/DatePicker';
import DateAdapter from '@mui/lab/AdapterLuxon';
import LocalizationProvider from '@mui/lab/LocalizationProvider';
import TextInput from "../TextInput/TextInput";

export const DATE_INPUT_FORMAT = "MM/dd/yyyy";

export const DateInput = ({name, label, defaultValue, ...props}) => {
    const {control, register, formState: {errors}} = useFormContext();
    return (
        <Controller
            name={name}
            control={control}
            render={({field}) => (
                <LocalizationProvider dateAdapter={DateAdapter}>
                    <DatePicker
                        {...field}
                        inputFormat={DATE_INPUT_FORMAT}
                        renderInput={(props) => (
                            <TextInput
                                label={label}
                                defaultValue={defaultValue}
                                {...register(name)}
                                error={!!errors[name]}
                                helperText={errors[name] ? errors[name]?.message : ''}
                                {...props}
                            />
                        )}
                        {...props}
                    />
                </LocalizationProvider>
            )}
        />
    )
};

DateInput.propTypes = {
    name: PropTypes.string.isRequired,
    label: PropTypes.string,
    defaultValue: PropTypes.string
};

DateInput.defaultProps = {
    label: "",
    defaultValue: "",
};

export default DateInput;

和TimePicker：

import React from "react";
import PropTypes from "prop-types";
import {Controller, useFormContext} from "react-hook-form";
import TimePicker from '@mui/lab/TimePicker';
import DateAdapter from '@mui/lab/AdapterLuxon';
import LocalizationProvider from '@mui/lab/LocalizationProvider';
import TextInput from "../TextInput/TextInput";

export const TIME_INPUT_FORMAT = "hh:mm a";

export const TimeInput = ({name, label, defaultValue, ...props}) => {
    const {control, register, formState: {errors}} = useFormContext();
    return (
        <Controller
            name={name}
            control={control}
            render={({field}) => (
                <LocalizationProvider dateAdapter={DateAdapter}>
                    <TimePicker
                        {...field}
                        inputFormat={TIME_INPUT_FORMAT}
                        renderInput={(props) => (
                            <TextInput
                                label={label}
                                defaultValue={defaultValue}
                                {...register(name)}
                                error={!!errors[name]}
                                helperText={errors[name] ? errors[name]?.message : ''}
                                {...props}
                            />
                        )}
                        {...props}
                    />
                </LocalizationProvider>
            )}
        />
    )
};

TimeInput.propTypes = {
    name: PropTypes.string.isRequired,
    label: PropTypes.string,
    defaultValue: PropTypes.string
};

TimeInput.defaultProps = {
    label: "",
    defaultValue: "",
};

export default TimeInput;

两者都使用鲁迅作为dateAdpater。该表单工作良好，并且值更新得很好。然而，在处理我的onSubmit时，我正在读取表单值并将它们发送回后端，我的DatePicker和TimePicker以以下格式返回它们的值：

日期：“星期六11月13日2021 23:36:59格林尼治时间-0500(东部标准时间)”

时间："2021-11-02T18:30:03.317-04:00“

其中，日期被正确地设置为日期，时间被正确地设置为时间。我认为读取UI上的值会以鲁迅日期格式返回，或者至少很容易被解析为鲁迅日期格式。通过这种方式，我可以将它们组合并格式化为日期时间字符串，以便DB能够接受它们。

我知道我可以手动解析日期字符串，但我认为一定有更好的方法来实现这一点。然而，我已经搜索了几个小时的卢克松和MUI博士，没有任何运气。

如果能对此提供任何帮助，我们将不胜感激。

例如：

我将这两个表单值传递给一个函数，如下所示：

export const formatDateAndTimeToDatetimeField = (date, time) => {
    const dateParsed = {Something here};
    const timeParsed = {Something here};
    const datetime = Datetime.fromObject({
        year: dateParsed.year,
        month: dateParsed.month,
        day: dateParsed.day,
        hour: timeParsed.hour,
        minute: timeParsed.minute,
    });
    return datetime.toUTC().toFormat("yyyy-MM-dd hh:mm:ss+00:00");
}

在这里，如果不编写代码显式解析字符串，我就无法很好地计算出这里的{ string }。我想卢森肯定有一个更好/更简单的解决方案，但我哪儿也找不到

谢谢你提前提供帮助。

Answer 1

你好，是的，有一种更好的解析字符串的方法，我也对MUI如何处理DateTime输入感到困惑。

实际上，在将date作为字符串提交到后端之前，将其作为字符串在表单中得到之后，您只需使用luxon解析字符串就可以得到一个完整的DateTime对象和您想要的所有应用格式。

import {DateTime} from 'luxon';


const Submit = (data) => {
   const date = DateTime.fromISO(data.date);
   // now you can use date object like a normal luxon DT object
   const payload = date.toSQLDate()
   // here request your backend with the payload
}

我的DatePicker组件如下所示：

import React from 'react';
import { useController } from 'react-hook-form';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DatePicker as MuiDatePicker } from '@mui/x-date-pickers/DatePicker';
import MuiTextField from '@mui/material/TextField';
import { AdapterLuxon } from '@mui/x-date-pickers/AdapterLuxon';

const DatePicker = ({ label, control, name, renderInput, inputFormat }) => {
  const {
    field: { onChange, value },
  } = useController({ control, name, defaultValue: '' });

  const changeHandler = (value) => {
    onChange(value.toISO());
  };

  const renderInputDefault = (props) => <MuiTextField {...props} />;
  return (
    <LocalizationProvider dateAdapter={AdapterLuxon}>
      <MuiDatePicker
        value={value}
        onChange={changeHandler}
        renderInput={renderInput ? renderInput : renderInputDefault}
        label={label}
        disableMaskedInput
        inputFormat={inputFormat}
      />
    </LocalizationProvider>
  );
};

希望能有所帮助:)