HTML原生date输入框的min属性无法直接限制“下半月”，因其只接受具体日期值；需用JavaScript动态设置min为当月16日，并监听input事件实时更新，同时服务端必须校验。
date input 的 min 属性无法直接限制“下半月”
HTML 原生 <input type="date"> 不支持按“上半月/下半月”这种业务逻辑做约束，min 和 max 只接受具体日期值（如 "2024-07-16"），没法写成“每月 16 号到月底”。浏览器不会解析动态表达式，也不会自动计算当月天数。
用 JavaScript 动态设置 min 值实现下半月约束
核心思路是：在页面加载和日期变更时，计算当前月份的下半月起始日（即当月 16 日），并赋给 min 属性。注意必须同时处理用户手动输入和日历选择两种情况。
常见错误现象：min 设为固定字符串（如 "2024-07-16"）会导致跨月失效；不监听 input 或 change 事件，用户切到下个月后仍可选上半月。
- 获取当前日期用
new Date()，再用setDate(16)得到当月 16 日 - 格式化为
YYYY-MM-DD：用toISOString().slice(0,10)或手动拼接（避免toLocaleDateString格式不一致） - 必须在
DOMContentLoaded时初始化，并在input事件中重新计算（防止用户改年份/月份后约束失效） - 示例代码片段：
<input type="date" id="datePicker">
<script>
function updateMinDate() {
const now = new Date();
const minDate = new Date(now.getFullYear(), now.getMonth(), 16);
const isoStr = minDate.toISOString().slice(0, 10);
document.getElementById('datePicker').min = isoStr;
}
updateMinDate();
document.getElementById('datePicker').addEventListener('input', updateMinDate);
</script>
兼容性与体验补救要点
Firefox 目前不支持 min/max 对 type="date" 的视觉禁用（仅阻止提交），Safari 在某些版本中对动态更新 min 响应滞后。纯前端限制不能替代服务端校验。
立即学习“前端免费学习笔记（深入）”；
- 务必在表单提交时用 JavaScript 再次校验：
new Date(value).getDate() → 提示“请选择下半月日期” - 移动端 iOS Safari 会忽略
min并显示完整日历，需配合自定义提示或禁用无效选项 - 如果项目已用 UI 库（如 Element Plus、Ant Design），优先使用其 DatePicker 组件的
disabledDate回调，比原生 input 更可控
为什么不用正则或 pattern 属性？
pattern 对 type="date" 无效——浏览器会忽略它，因为 date 输入框的值始终是标准格式字符串，不走文本匹配流程。试图用 inputmode="numeric" 或 oninput 截断输入也无意义，日期选择器不触发键盘输入事件。
真正要拦住用户，只能靠 min + JS 校验 + 提交拦截三层组合。漏掉任何一层，都可能让 1–15 日的值进到后端。
