React使用原生date类型input时显示日期差1天如何解决？

报错根因 #

原生type="date"的input组件的value属性仅接受yyyy-MM-dd格式的字符串，你当前将替换为斜杠分隔的startDisplay直接传给了input的value，不符合原生组件的格式要求，因此抛出格式错误。

现有代码的其他问题 #

1. Intl.DateTimeFormat的第一个参数为区域配置，你没有传值，不同运行环境的默认区域不同，输出的日期格式会不稳定，部分环境默认就是斜杠分隔，部分是横杠分隔，你的两次replace逻辑本身也不严谨，全量替换应该用replace(/-/g, '/')而不是调用两次。
2. React的setState是异步更新的，你在onChange中刚调用setStartDate就直接用startDate变量，拿到的是更新前的旧值，转换出来的日期永远是上一次选中的结果。
3. 直接用new Date(yyyy-MM-dd格式字符串)时，浏览器会默认将其解析为UTC时间，如果你处于东八区等非UTC时区，转换为本地时间时会出现日期差一天的问题，必须做时区偏移处理。

修复方案 #

你需要拆分两类日期值的用途，不要混为一谈：

• 传给原生date input的value：永远保持yyyy-MM-dd格式，不需要做斜杠替换
• 给用户展示的本地化日期：才需要转换为斜杠分隔或其他自定义格式，这类值不要回传给input的value

正确实现代码 #

// 工具函数：将input返回的yyyy-MM-dd字符串转换为本地时区的展示格式（yyyy/MM/dd）
const getDisplayDate = (inputDateStr) => {
  if (!inputDateStr) return ''
  // 拼接时间部分，强制浏览器按本地时间解析，避免时区差导致日期偏移
  const date = new Date(`${inputDateStr}T00:00:00`)
  return Intl.DateTimeFormat('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit'
  }).format(date)
  // zh-CN区域默认输出就是yyyy/MM/dd格式，不需要额外replace，有特殊格式要求再调整即可
}

// 组件内input用法
<input
  type='date'
  name='startDate'
  value={startDate}
  onChange={(e) => {
    const inputVal = e.target.value
    setStartDate(inputVal)
    setStartDisplay(getDisplayDate(inputVal))
  }}
/>

如果你需要将Date对象反向赋值给input的value，补充一个时区处理的工具函数即可：

const dateToInputValue = (date) => {
  if (!date) return ''
  // 处理时区偏移，转换为本地时区的yyyy-MM-dd格式
  const offset = date.getTimezoneOffset()
  const adjustedDate = new Date(date.getTime() - offset * 60 * 1000)
  return adjustedDate.toISOString().split('T')[0]
}

关于第三方库的选择 #

如果只是基础的日期选择需求，原生date input完全够用，不需要引入第三方库增加包体积。如果需要自定义样式、日期范围选择、禁用特定日期、时间联动等复杂功能，再考虑引入antd DatePicker、react-datepicker等成熟的第三方组件即可。

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