React自定义日期输入组件从数据库取数后无法显示问题

核心问题分析 #

原生HTML的type="date"输入框有严格的格式要求：必须传入YYYY-MM-DD格式的字符串作为value，否则会默认显示占位符dd/mm/yyyy。你的代码存在两个关键错误：

• 输入框的value被硬编码成了"Start Date"/"End Date"，没有绑定从数据库获取的state值
• 错误使用了不存在的autofill属性，原生输入框没有这个属性，应该用value绑定状态

修复步骤 #

1. 修正输入框的属性绑定 #

把硬编码的value替换为state中的日期值，同时移除无效的autofill属性：

<Box sx={{ flexBasis: 0, flexGrow: 1 }}>
  <Input
    id="startDate"
    value={state.startDate || ''}
    type="date"
    readOnly={disabled}
    required
  />
</Box>
<Box sx={{ flexBasis: 0, flexGrow: 1 }}>
  <Input
    id="endDate"
    value={state.endDate || ''}
    type="date"
    readOnly={disabled}
  />
</Box>

2. 确保日期格式为YYYY-MM-DD #

如果从数据库获取的日期格式不是YYYY-MM-DD（比如是DD/MM/YYYY或者带时间的ISO字符串），需要先转换格式。可以添加一个工具函数处理：

// 转换日期为YYYY-MM-DD格式
const formatDateForInput = (dateStr: string): string => {
  // 如果是ISO格式（比如2024-05-20T00:00:00.000Z），直接截取前10位
  if (dateStr.includes('T')) {
    return dateStr.split('T')[0];
  }
  // 如果是DD/MM/YYYY格式，转换为YYYY-MM-DD
  if (dateStr.includes('/')) {
    const [day, month, year] = dateStr.split('/');
    return `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`;
  }
  // 已经是YYYY-MM-DD格式则直接返回
  return dateStr;
};

3. 获取数据时处理日期格式 #

用Axios获取数据后，先转换日期格式再更新state：

// 示例：Axios请求数据后处理
axios.get('/api/your-data-endpoint')
  .then(response => {
    const data = response.data;
    // 转换日期格式后更新state
    setState(prev => ({
      ...prev,
      startDate: formatDateForInput(data.startDate),
      endDate: formatDateForInput(data.endDate),
      // 其他字段...
    }));
  })
  .catch(err => console.error(err));

验证逻辑 #

• 提交表单时，form.startDate.value会自动以YYYY-MM-DD格式存入数据库，这部分你的代码是正确的
• 获取数据后，只要确保state.startDate和state.endDate是YYYY-MM-DD格式，输入框就能正常显示日期

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