React组件datetime-local输入框默认设为当前时间：转换new Date()格式

我之前也踩过这个坑！datetime-local输入框只认不带时区信息的ISO 8601格式字符串，具体格式是YYYY-MM-DDTHH:mm（也可以精确到秒，比如YYYY-MM-DDTHH:mm:ss），但直接调用new Date()返回的字符串带时区后缀（比如2024-05-20T14:30:00.000Z），浏览器根本识别不了，自然无法初始化输入值。

快速转换方法 #

最简单的方式是先用toISOString()把Date对象转成标准ISO格式，再截取前16位（保留到分钟）或者前19位（保留到秒）：

// 保留到分钟的格式
const currentDateTime = new Date().toISOString().slice(0, 16);
// 保留到秒的格式（如果需要）
const currentDateTimeWithSeconds = new Date().toISOString().slice(0, 19);

React组件完整示例 #

下面是一个函数组件的实际用法，展示如何初始化默认值并处理输入变化：

import { useState } from 'react';

function DateTimePicker() {
  // 用回调函数初始化状态，避免每次渲染都生成新的Date对象
  const [selectedDateTime, setSelectedDateTime] = useState(() => {
    return new Date().toISOString().slice(0, 16);
  });

  const handleInputChange = (e) => {
    setSelectedDateTime(e.target.value);
  };

  return (
    <div>
      <label htmlFor="event-time">选择活动时间：</label>
      <input
        type="datetime-local"
        id="event-time"
        value={selectedDateTime}
        onChange={handleInputChange}
      />
    </div>
  );
}

export default DateTimePicker;

本地化时间的处理（可选） #

上面的方法基于UTC时间转换，如果需要显示用户的本地当前时间，可以手动拼接年、月、日、时、分（注意月份是从0开始的，要加1）：

const now = new Date();
const localDateTime = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}T${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`;

这种方式更贴合用户的本地时区体验，适合不需要统一UTC时间的场景。

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