HTML5日期格式化技巧

本文澄清了一个常见误区：Lodash 作为通用工具库并不支持日期格式化，HTML5 日期输入框返回的 ISO 字符串（如 "2024-03-15"）不能直接交由 Lodash 处理——它既无 `formatDate` 等方法，也无法理解日期逻辑；真正可靠的做法是先用原生 `new Date()` 或轻量库如 dayjs 解析该字符串为日期实例，再进行可控格式化，同时务必避免将字符串误当作 Date 对象调用方法、忽略非法输入校验等典型错误，从而回归“职责分离”的本质：让 HTML5 负责标准化输入，让原生 JS 或专业日期库负责解析与呈现，而 Lodash 只在后续数据加工中发挥所长。

HTML5 的 <input type="date"> 返回的是 ISO 8601 字符串（如 "2024-03-15"），不是 Date 对象，直接传给 moment() 或 dayjs() 可能没问题，但 lodash 本身不提供日期格式化功能 —— 它没有 formatDate、dateFormat 这类方法。

为什么 lodash 不能直接格式化 HTML5 日期

lodash 是工具函数库，专注数组、对象、字符串等通用操作，不包含日期处理模块。你搜到的“lodash 格式化日期”大多混淆了 lodash 和 moment/dayjs，或误用了 _.template 手动拼接 —— 这不是格式化，是字符串替换。

• _.toString(new Date()) → 返回 "Fri Mar 15 2024..."，不是可控格式
• _.padStart 等字符串工具无法解析年月日逻辑
• 试图用 _.mapKeys 或 _.pick 处理 "2024-03-15" 字符串，属于过度设计

正确做法：用原生 JS 或轻量库解析再格式化

拿到 <input type="date"> 的值后，先转成 Date 实例，再用标准方法格式化。若需兼容旧浏览器或简化写法，推荐 dayjs（比 moment 更轻）：

const dateStr = document.getElementById('myDate').value; // "2024-03-15"
const date = new Date(dateStr); // ✅ 原生支持 ISO 字符串解析
const formatted = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;

或者用 dayjs：

import dayjs from 'dayjs';
const dateStr = document.getElementById('myDate').value;
const formatted = dayjs(dateStr).format('YYYY-MM-DD'); // 同样接受 "2024-03-15"

• 不要把 dateStr 直接喂给 lodash 期望它“理解日期”
• new Date("2024-03-15") 在所有现代浏览器中可靠；但 new Date("15/03/2024") 不行
• 如果项目已用 lodash 且不想加新依赖，就用原生 Date + toLocaleDateString（注意 locale 和选项）

常见错误：把 value 当 Date 对象直接调用 toLocaleDateString

HTML5 date 输入框的 .value 是字符串，不是 Date 实例。以下会报错：

document.getElementById('myDate').value.toLocaleDateString(); // ❌ TypeError: ... is not a function

必须显式构造：

const input = document.getElementById('myDate');
const date = new Date(input.value);
if (!isNaN(date.getTime())) {
  const display = date.toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' });
}

• 检查 date.getTime() 是否为有效数值，避免空值或非法字符串（如 ""）导致 Invalid Date
• toLocaleDateString 的格式受用户系统 locale 影响，服务端渲染或固定格式场景慎用
• 不要依赖 lodash.isDate 判断 input.value —— 它永远返回 false，因为那是字符串

真正要做的，是分清职责：HTML5 提供标准化输入字符串，JS 原生或专用日期库负责解析与格式化。lodash 在这个链条里，只适合做后续的数据整理（比如把多个日期字符串塞进对象再 _.mapValues），而不是替代 Date 构造或 format 函数。

理论要掌握，实操不能落！以上关于《HTML5日期格式化技巧》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！