如何采集只限年月选择的特定周期月份数据?
- 内容介绍
- 文章标签
- 相关推荐
本文共计672个文字,预计阅读时间需要3分钟。
type=text/plain
想提交带日的日期?别改 type="month",换方案
常见错误是给 type="month" 加 min/max 或 JS 拼接日,比如强行设成 "2024-06-01"。这会导致:
• 输入框显示异常(部分浏览器清空或回退到上月)
• 表单验证失败(ValidityState.badInput === true)
• 移动端软键盘弹出月历而非数字键盘,体验断裂
正确做法是:
• 后端接收 YYYY-MM 后,按业务规则补日(如统一用 -01 表月初,-15 表月中)
• 若需用户指定日,改用 type="date" + step="30"(不精准但可提示)或搭配下拉选日
• 纯前端处理时,用 new Date(year, monthIndex, 1) 构造当月第一天,避免字符串拼接出错
移动端兼容性差,尤其 iOS Safari
iOS Safari 对 type="month" 支持滞后:iOS 15.4 才开始支持,且不触发 input 事件,只响应 change;输入框 placeholder 不显示;点击后可能跳转到年份选择页而非月历。Android Chrome 表现相对稳定,但三星键盘常覆盖控件。
本文共计672个文字,预计阅读时间需要3分钟。
type=text/plain
想提交带日的日期?别改 type="month",换方案
常见错误是给 type="month" 加 min/max 或 JS 拼接日,比如强行设成 "2024-06-01"。这会导致:
• 输入框显示异常(部分浏览器清空或回退到上月)
• 表单验证失败(ValidityState.badInput === true)
• 移动端软键盘弹出月历而非数字键盘,体验断裂
正确做法是:
• 后端接收 YYYY-MM 后,按业务规则补日(如统一用 -01 表月初,-15 表月中)
• 若需用户指定日,改用 type="date" + step="30"(不精准但可提示)或搭配下拉选日
• 纯前端处理时,用 new Date(year, monthIndex, 1) 构造当月第一天,避免字符串拼接出错
移动端兼容性差,尤其 iOS Safari
iOS Safari 对 type="month" 支持滞后:iOS 15.4 才开始支持,且不触发 input 事件,只响应 change;输入框 placeholder 不显示;点击后可能跳转到年份选择页而非月历。Android Chrome 表现相对稳定,但三星键盘常覆盖控件。

