HTML原生<input type="date">不支持“今天”“昨天”“本周”等相对日期快捷选择，仅接受YYYY-MM-DD格式字符串；需用JavaScript动态计算日期并赋值给value属性，注意时区处理与DOM就绪时机。
HTML原生为什么选不了“今天”“昨天”“本周”
原生 <input type="date"> 只提供日历面板和手动输入，不支持预设相对日期（如“昨天”“本周一”）。浏览器根本不理解“本周”这种语义，它只认 YYYY-MM-DD 格式字符串。想点一下就填入动态日期，必须靠 JavaScript 补足。
用JavaScript动态设置value实现“今天/昨天/本周”按钮
核心是获取目标日期 → 转成标准字符串 → 赋给 input 元素的 value 属性。注意：必须是 YYYY-MM-DD 格式，"2024-05-20" 可以，"2024/05/20" 或 "2024-5-20" 会清空或失效。
- 今天：
new Date().toISOString().split('T')[0] - 昨天：
new Date(Date.now() - 86400000).toISOString().split('T')[0] - 本周一（假设周起始为周一）：
const d = new Date(); const day = d.getDay() || 7; d.setDate(d.getDate() - day + 1); d.toISOString().split('T')[0];
把这些逻辑封装成函数，绑定到按钮 onclick 即可。别直接用 toLocaleDateString() —— 它输出格式依赖本地环境，不可靠。
避免常见坑：时区、DOM时机、input类型混用
容易出错的地方不是逻辑，而是执行上下文：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 如果页面加载时就运行 JS 设置 value，但
input元素还没解析完成，会报Cannot set property 'value' of null—— 务必等 DOM ready，比如用document.addEventListener('DOMContentLoaded', ...) -
type="date"的 input 对时区敏感：new Date()是本地时间，但toISOString()强制转 UTC。若用户在东八区，new Date().toISOString()可能比本地日期早或晚一天。稳妥做法是手动拼字符串：`${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}` - 别把
type="date"和type="text"混用再靠 JS 模拟 —— 移动端原生日期键盘会消失，体验倒退
要不要引入第三方库？看场景
纯静态页面、只需三五个快捷按钮，手写 JS 更轻量、无额外请求、无兼容风险。但如果需要“上个月”“最近7天”“季度初”等复杂规则，或要兼容 IE（已淘汰），才值得考虑 dayjs 或 date-fns。注意：这些库解决的是日期计算，仍需你自己把结果塞进 input.value —— 它们不自动接管 HTML input 行为。
真正容易被忽略的，是时区处理和 DOM 就绪时机。很多“点了没反应”的问题，其实既不是日期算错，也不是按钮没绑事件，而是 value 被设在了元素创建前，或者字符串格式不对导致浏览器静默丢弃。
