HTML5日期输入框本身不产生乱码，问题多源于时区转换、格式不合规或locale配置缺失；需统一处理时区归一化与严格校验YYYY-MM-DD格式。
HTML5 日期输入框（<input type="date">）本身不产生乱码，所谓“乱码”几乎全是浏览器渲染、时区解析或后端接收/存储环节出的问题。
浏览器显示的日期值为什么看起来像“2024-03-15”但提交后变成“2024-03-14”？
这是典型的时区转换问题：<input type="date"> 始终以本地时区解析用户选择，但内部值按 UTC 零点归一化。例如你在东八区选了 2024-03-15，浏览器实际提交的是 2024-03-15T00:00:00.000Z，服务端若直接转为本地时间（如用 new Date('2024-03-15')），就可能回退成 3 月 14 日。
- 前端确认值：用
input.valueAsNumber或new Date(input.value + 'T00:00')显式构造本地零点时间 - 后端接收时别依赖字符串自动解析，优先用带时区的 ISO 格式（如
2024-03-15T00:00:00+08:00）或明确指定时区解析 - 数据库存贮推荐统一用
DATE类型（不带时区）或TIMESTAMP WITHOUT TIME ZONE，避免隐式转换
页面里用 toLocaleDateString() 渲染日期却出现中文乱码或格式错乱
不是编码问题，是 locale 配置缺失或不匹配。浏览器会根据 lang 属性和系统语言决定如何格式化，但若未显式指定 locale，不同浏览器行为不一致。
- 强制指定 locale：用
date.toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' }) - 确保 HTML 根元素有
lang="zh-CN"，否则部分旧版 Safari 可能 fallback 到英文 - 避免直接拼接字符串（如
date.getFullYear() + '-' + (date.getMonth()+1)），它不处理补零、农历、夏令时等边界
表单提交后后端收到的日期字段是空或 Invalid Date
常见于：用户没选日期但代码仍读取 input.value；或用了非标准格式字符串（如 "15/03/2024"）赋值给 input.value，导致浏览器拒绝解析。
立即学习“前端免费学习笔记（深入）”；
-
<input type="date">只接受YYYY-MM-DD格式字符串，其他格式一律清空或报错 - 赋值前校验：
if (/^\d{4}-\d{2}-\d{2}$/.test(val)) input.value = val - 提交前检查：
if (!input.value) { /* 提示必填 */ }，不要依赖input.checkValidity()后再读值，它可能已失效
真正要盯紧的是「时区归一化」和「格式硬约束」这两条线——浏览器不会乱码，它只是严格按规范做事；你看到的异常，基本都是跨环节时区没对齐，或某处悄悄塞了非法格式进去。
