React中如何为datetime-local输入框设置服务端返回的动态日期值

HTML <input type="datetime-local"> 的value属性仅接受不带时区标识的ISO 8601格式字符串，要求格式为yyyy-MM-ddThh:mm，可可选补全:ss或:ss.SSS精度。你从服务端拿到的字符串末尾的Z是UTC时区标识，不符合格式要求，因此会触发控制台报错，输入框也无法正常渲染数值。
直接传入Date对象也无法生效，因为该输入框的value仅接受符合格式要求的字符串类型值。

根据你的业务需求可以选择两种处理方式：

• 场景A：需要将UTC时间转换为用户本地时间后展示
  封装转换函数处理服务端返回的ISO字符串：

// 补零工具函数
const padZero = (num) => num.toString().padStart(2, '0');

function convertUTCToDatetimeLocal(utcStr) {
  const date = new Date(utcStr);
  return `${date.getFullYear()}-${padZero(date.getMonth() + 1)}-${padZero(date.getDate())}T${padZero(date.getHours())}:${padZero(date.getMinutes())}`;
}

// 赋值给state前先做转换
this.setState({
  dateTime: convertUTCToDatetimeLocal('2021-11-11T16:27:00Z')
})

• 场景B：不需要转换时区，直接展示服务端返回的时间数值
  直接裁剪字符串去掉时区标识即可：

const serverTime = '2021-11-11T16:27:00Z';
// 去掉末尾Z后裁剪到分钟精度，需要保留秒的话可以修改slice结束位置为19
const formatTime = serverTime.replace('Z', '').slice(0, 16);
this.setState({ dateTime: formatTime })

提交数据给服务端时，需要将输入框返回的无时区格式转换为服务端要求的带Z的UTC格式：

const inputValue = this.state.dateTime;
const submitValue = new Date(inputValue).toISOString();

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