HTML中如何使用Day.js处理日期和时间格式化-html教程-PHP中文网

day.js 是轻量级不可变日期库，需显式加载 locale 和插件；用 dayjs() 创建实例，支持 iso 字符串解析，非 iso 需 customparseformat 插件；format() 依赖 locale 插件实现本地化，toisostring() 恒返 utc 时间。

html中如何使用day.js处理日期和时间格式化

Day.js 初始化和基础用法

Day.js 是轻量级的日期处理库，替代 Moment.js 的常见选择。它默认不带 locale 和插件，必须显式加载需要的功能。

直接使用 dayjs() 创建当前时间实例，返回的是不可变对象（每次调用都生成新实例）
若需解析字符串，传入 ISO 格式（如 "2023-10-05"）或带格式的字符串（需配合 CustomParseFormat 插件）
不要直接修改返回值：dayjs().add(1, 'day') 是合法的，但 dayjs().date(10) 会报错 —— Day.js 没有 setter 方法，要用 set('date', 10) 或组合操作

const now = dayjs(); // 当前时间
const parsed = dayjs('2024-03-15T14:30:00'); // 自动识别 ISO
const custom = dayjs('15/03/2024', 'DD/MM/YYYY'); // 需先引入 CustomParseFormat 插件

格式化输出：format() 的参数和限制

format() 是最常用方法，但它的 token 和原生 JavaScript 的 Intl.DateTimeFormat 不兼容，也不支持自定义 locale 格式缩写（如 “MMM” 在中文下默认是 “Jan”，不是 “一月”）。

基础 token 如 YYYY、MM、DD、HH、mm、ss 可直接用；A 表示 AM/PM，dd 是星期几缩写（英文）
中文 locale 需手动加载：import 'dayjs/locale/zh-cn'; dayjs.locale('zh-cn');，否则 format('dddd') 输出 “Monday” 而非 “星期一”
format() 不支持时区偏移自动本地化（如用户浏览器是 UTC+8，但服务器返回 UTC 时间），需配合 utc() 或 timezone() 插件处理

dayjs().format('YYYY-MM-DD HH:mm:ss'); // "2024-03-15 14:30:22"
dayjs().format('YYYY年MM月DD日 dddd');   // 加载 zh-cn 后才显示“星期五”

处理时区：为什么 new Date().toISOString() 和 dayjs().toISOString() 结果一致

dayjs().toISOString() 总是返回 UTC 时间字符串（末尾带 Z），和原生 new Date().toISOString() 行为一致 —— 这是因为 Day.js 内部也基于毫秒数计算，不绑定本地时区上下文。

如果你拿到的是本地时间字符串（如 "2024-03-15 14:30"），直接 dayjs("2024-03-15 14:30") 会被当作本地时间解析，再调用 toISOString() 就会出错（比如在中国解析后转 UTC 会变成次日凌晨）
正确做法：明确标注时区，或统一用 UTC 时间流转。例如后端返回带时区的 ISO 字符串（"2024-03-15T14:30:00+08:00"），Day.js 能自动识别并保留偏移
需要显示为用户本地时间？不用额外转换 —— format() 默认按浏览器时区渲染；需要强制某一时区（如展示东京时间），必须引入 timezone 插件并指定 tz('Asia/Tokyo')

常见错误：format() 返回空字符串或 Invalid Date

这通常不是 Day.js 本身 bug，而是输入源或插件缺失导致。

输入字符串无法被自动解析（如 dayjs('2024/03/15 14:30') 中间有空格且无插件）→ 返回 Invalid Date → format() 输出空字符串

Wechat HTML Publisher
直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载
忘记加载 locale 插件却用了 locale 相关方法（如 fromNow()）→ 控制台警告，部分方法返回 fallback 英文
在 SSR 环境（如 Next.js）中未做客户端检查就调用 dayjs().fromNow() → 服务端无 document 或时区信息，结果异常
检查方式：打印 dayjs('xxx').isValid()，false 就说明解析失败
解决路径：优先用 ISO 格式传输时间；非 ISO 字符串务必配 CustomParseFormat 插件；SSR 场景延迟到 useEffect 或 useClient 后执行格式化