使用HTML datetime-local类型设置获取日期时间的全流程实现咨询

你设想的存UTC时间再做客户端转换的方案完全可行，这是跨时区场景下处理日期时间的通用标准方案，原生JS即可实现全流程，不需要依赖momentjs。

全流程实现步骤 #

1. 用户输入后转UTC时间存入数据库 #

原生datetime-local输入框的value格式为YYYY-MM-DDTHH:mm，默认对应用户本地时区的时间，只需要做简单转换即可得到标准UTC字符串：

// 获取输入框值
const localInputVal = document.querySelector('input[type="datetime-local"]').value;
// 转成日期对象（自动识别为用户本地时区时间）
const date = new Date(localInputVal);
// 转成标准UTC ISO字符串，格式示例：2021-10-26T01:14:27.920Z，和你提到的+00:00格式完全等价，直接传给后端入库即可
const utcIsoStr = date.toISOString();

数据库字段建议直接用datetime或者timestamp类型存储，不需要做额外时区转换。

2. 从数据库取出后转成datetime-local可接收的格式 #

datetime-local不支持带时区的字符串，需要把后端返回的UTC时间转成用户本地时区的对应格式再赋值：

// 后端返回的UTC时间字符串示例
const utcStrFromBackend = '2021-10-26T01:14:27.920Z';
const date = new Date(utcStrFromBackend);

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

// 提取本地时区的各个时间部分
const year = date.getFullYear();
const month = padZero(date.getMonth() + 1); // getMonth返回0-11，需要+1
const day = padZero(date.getDate());
const hour = padZero(date.getHours());
const minute = padZero(date.getMinutes());

// 拼接成datetime-local接受的标准格式
const inputCompatibleStr = `${year}-${month}-${day}T${hour}:${minute}`;
// 赋值给输入框
document.querySelector('input[type="datetime-local"]').value = inputCompatibleStr;

3. 普通页面展示场景（非输入框赋值） #

如果只是要把UTC时间转成用户本地时间展示在页面上，直接用原生toLocaleString方法即可，支持自定义格式：

const utcStr = '2021-10-26T01:14:27.920Z';
const date = new Date(utcStr);
// 默认输出示例（东八区用户）：2021/10/26 09:14:27
console.log(date.toLocaleString());

// 自定义格式示例
console.log(date.toLocaleString('zh-CN', {
  year: 'numeric',
  month: '2-digit',
  day: '2-digit',
  hour: '2-digit',
  minute: '2-digit'
}));

注意事项 #

• 不要直接把datetime-local的原始value存入数据库，该值不带时区信息，跨时区用户访问会出现时间偏差
• 所有时区转换逻辑全部放在客户端处理，后端只需要存储和透传UTC时间即可，不需要做任何时区相关的转换
• 如果需要精确到秒，给datetime-local加上step="1"属性，拼接格式的时候加上秒的部分即可，对应格式为YYYY-MM-DDTHH:mm:ss

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