html原生date输入框不支持模糊查询，需改用text类型配合js解析；推荐dayjs或date-fns库处理相对时间，避免moment.js；解析失败应保留输入，不强制清空，并通过日历弹窗+预览增强交互。
HTML原生不支持模糊查询
浏览器自带的 <input type="date"> 只提供日历弹窗和精确日期选择，无法输入“2024”“夏”“上月”这类模糊词，也没有搜索、匹配、联想功能。这是规范限制，不是写法问题——HTML标准里它压根没定义模糊匹配行为。
如果你看到某些页面能输“昨天”“next Friday”就跳转日期，那背后一定是 JavaScript 在接管输入、解析字符串、转换为 Date 对象，再手动设置 value。
用 + JS 解析常见模糊表达
实际可行的做法是放弃 type="date"，改用 <input type="text">，然后监听 input 或 blur 事件，用 JS 尝试解析用户输入：
- 匹配中文关键词：
"今天"→new Date()；"明天"→date.setDate(date.getDate() + 1) - 识别英文相对时间：
"last week"、"2024-06"、"Jun 2024"可用dayjs().parse()或Date.parse()（注意后者兼容性差） - 简单正则兜底：
/^\d{4}$/匹配年份 → 默认设为当年 1 月 1 日；/^\d{4}-\d{1,2}$/匹配年月 → 设为当月 1 日 - 解析失败时保留原输入，不强制清空，方便用户手动修正
示例逻辑片段：
input.addEventListener('blur', () => {
const str = input.value.trim();
let parsed = parseFuzzyDate(str); // 自定义函数
if (parsed) {
input.value = parsed.toISOString().split('T')[0]; // 转成 YYYY-MM-DD 格式
}
});
推荐用 dayjs 或 date-fns 替代手写解析
自己写正则+逻辑处理“下个月最后一天”“隔周周三”这类需求极易出错，且时区、闰年、月份天数都得兜住。直接用成熟库更稳：
-
dayjs+dayjs/plugin/relativeTime+dayjs/plugin/customParseFormat：支持dayjs('昨天').toDate() -
date-fns的parse和parseISO对标准格式友好，配合addDays/subMonths组合灵活 - 避免用
moment.js：体积大、已进入维护模式，新项目没必要 - 注意：所有解析结果必须校验有效性，
isNaN(new Date(...).getTime())是基本防线
模糊查询后要不要同步到原生 date 输入框？
不建议把解析后的日期塞回 <input type="date">。因为用户后续仍可能想切回模糊输入（比如改成“下周”），而 type="date" 会锁死输入为 YYYY-MM-DD 格式，删掉内容后无法再输文字。
更合理的交互是：
- 始终用
<input type="text">作为唯一输入控件 - 旁边加一个按钮触发日历弹窗（可用
<input type="date">隐藏 + 点击时.click()模拟），选完后把值填回 text 框 - 显示一个微缩日期预览（如
<small>→ 2024-06-15</small>），让用户确认解析是否符合预期
真正难的不是解析几个关键词，而是覆盖用户真实会写的表达方式——比如“腊月”“国庆后三天”“孩子生日那天”，这些需要业务语义理解，通用库做不到，得靠产品和前端一起收用户反馈持续补规则。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
