Material-UI Core日期选择器：前端、API与数据库日期不一致问题

问题根源 #

使用type="date"的TextField时，浏览器会将用户选择的日期（如2025-03-31）解析为本地时区的当日0点（例如CDT时区对应2025-03-31T00:00:00-05:00）。若后端（Java）按UTC时区解析该日期，会转换为前一天的本地时间（如Sun Mar 30 19:00:00 CDT 2025），最终导致数据库存储错误。而回显时后端返回UTC时区的0点日期字符串，前端解析后自动转换为本地时区的正确日期，造成前后端显示不一致。

适配Material-UI Core的解决方案 #

1. 前端发送：直接传递YYYY-MM-DD字符串 #

修改handleInputChange函数，直接获取输入框的value（标准YYYY-MM-DD格式），避免转换为Date对象发送给后端：

const handleInputChange = (e) => {
  const { name, value } = e.target;
  // 直接传递纯日期字符串，无需转换为Date
  setFormState(prev => ({ ...prev, [name]: value }));
};

后端收到纯日期字符串后，可直接按YYYY-MM-DD格式解析，不受时区影响。

2. 后端解析：明确按纯日期格式处理（若后端可修改） #

如果后端代码可控，使用LocalDate（仅存储日期，不含时区）搭配指定格式解析：

// Java示例：解析纯日期字符串
String dateStr = request.getParameter("rescheduleDate");
LocalDate rescheduleDate = LocalDate.parse(dateStr, DateTimeFormatter.ISO_LOCAL_DATE);
// 存储时使用LocalDate类型，彻底规避时区问题

3. 前端回显：将UTC日期转换为YYYY-MM-DD格式 #

若后端返回带时区的日期字符串（如2025-03-31T00:00:00.000+00:00），前端需转换为标准日期格式后再赋值给组件：

const formatUtcDateToYmd = (utcDateStr) => {
  if (!utcDateStr) return '';
  const date = new Date(utcDateStr);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
};

// 回显时使用格式化后的字符串
const rescheduleDate = formatUtcDateToYmd(apiResponse.rescheduleDate);

4. 优化组件：统一日期处理逻辑 #

在InputDatePicker组件内部集成格式化逻辑，确保传入传出的均为标准日期字符串：

import * as React from 'react';
import { TextField } from '@material-ui/core';

function InputDatePicker(props) {
    const { error = null, label, name, onChange, value, ...other } = props;

    // 处理回显值：将带时区的日期字符串转换为YYYY-MM-DD
    const formattedValue = (() => {
        if (!value) return '';
        if (value.includes('T')) {
            const date = new Date(value);
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            return `${year}-${month}-${day}`;
        }
        return value;
    })();

    return (
         <TextField
            variant='outlined'
            label={label}
            name={name}
            value={formattedValue}
            onChange={onChange}
            {...other}
            {...(error && {error: true, helperText: error})}
        />
    );
}

export default InputDatePicker;

关键注意点 #

• 前后端统一使用YYYY-MM-DD纯日期格式传递数据，避免传递Date对象或带时区的字符串。
• 后端优先使用仅存储日期的类型（如Java的LocalDate），避免使用带时区的Date类型。

内容的提问来源于stack exchange，提问作者Mtullis