JavaScript如何实现数据库datetime与HTML input datetime格式互转

分无依赖原生实现和轻量库实现两种可选，均已兼容时区处理，可避免格式不匹配报错：

无第三方依赖原生JS方案 #

数据库UTC格式（2021-09-25T17:04:53.177Z）转HTML datetime-input支持格式 #

function utcToHtmlDatetime(utcStr) {
  const date = new Date(utcStr)
  const pad = num => String(num).padStart(2, '0')
  return `${date.getFullYear()}-${pad(date.getMonth()+1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}`
}

调用示例：utcToHtmlDatetime('2021-09-25T17:04:53.177Z') 会自动根据用户本地时区输出符合要求的2021-09-25Txx:xx格式字符串

HTML datetime-input格式转数据库UTC格式 #

function htmlDatetimeToUtc(htmlStr) {
  return new Date(htmlStr).toISOString()
}

调用示例：htmlDatetimeToUtc('2021-09-22T14:04') 直接输出和数据库格式完全匹配的带Z后缀UTC时间字符串

轻量库方案（项目允许引入依赖时推荐，边界情况处理更完善） #

使用仅2KB大小的dayjs库实现，代码更简洁：

转HTML输入格式 #

import dayjs from 'dayjs'
const utcToHtml = (utcStr) => dayjs(utcStr).format('YYYY-MM-DDTHH:mm')

转数据库存储格式 #

const htmlToUtc = (htmlStr) => dayjs(htmlStr).toISOString()

注意事项 #

• 不要直接对原始时间字符串做切片处理，会忽略时区偏移，导致时间偏差
• 转换过程会自动处理本地时区和UTC的时间差，和HTML datetime-input组件的原生逻辑完全匹配

内容的提问来源于stack exchange，提问作者Harsha M V