HTML5原生date输入框不支持工作日限制，需用JavaScript通过change事件和getDay()校验；禁用周末须用Flatpickr等自定义组件；服务端必须二次校验，前端限制仅为体验优化。
HTML5 <input type="date"> 本身不支持工作日限制
浏览器原生的 <input type="date"> 只能通过 min、max 和 step 控制日期范围和步长，**没有内置属性能排除周六、周日或节假日**。所谓“HTML5 工作日限制”，本质是前端 JavaScript 配合校验 + 用户体验优化，不是纯 HTML 能搞定的事。
用 change 事件 + getDay() 实时校验是否为工作日
用户选完日期后立刻检查星期几（0 是周日，6 是周六），不符合就清空或提示：
<input type="date" id="workdayInput">
<script>
const input = document.getElementById('workdayInput');
input.addEventListener('change', () => {
const date = new Date(input.value);
const day = date.getDay(); // 0=Sun, 6=Sat
if (day === 0 || day === 6) {
alert('请选择周一至周五的工作日');
input.value = ''; // 清空非法选择
}
});
</script>
- 注意：仅校验
change事件，不拦截日历弹窗里的点击，用户仍可点周六日再触发提示 -
getDay()返回值是本地时区的星期，无需手动转换时区 - 若需兼容旧浏览器（如 IE），
input.value为空字符串时new Date('')会返回 Invalid Date，建议加if (!input.value) return;
禁用日历面板中的周末日期（需自定义日历组件）
原生日历无法禁用特定日期，必须替换为第三方库（如 Flatpickr、Pikaday）或手写日历控件。以 Flatpickr 为例：
<input id="flatpickrWorkday">
<script>
flatpickr('#flatpickrWorkday', {
dateFormat: 'Y-m-d',
disable: [
function(date) {
return (date.getDay() === 0 || date.getDay() === 6);
}
]
});
</script>
-
disable函数返回true表示该日期不可选 - Flatpickr 默认支持中文 locale，但需显式引入语言包才显示「周一」等文字
- 如果项目已用 Vue/React，优先选对应生态的封装组件（如
v-calendar、@react-spring/date-fns），避免全局脚本冲突
服务端必须二次校验，不能只信前端
前端限制纯属用户体验优化，绕过 JS 或直接发请求就能提交周末日期。后端收到 date 字段后必须重新解析并检查：
立即学习“前端免费学习笔记（深入）”；
- Python（Django/Flask）：
date.weekday() in (0, 1, 2, 3, 4)（0=Mon） - Node.js：
date.getDay() % 7 < 5（结果为1~5才是周一到周五） - Java（LocalDate）：
date.getDayOfWeek().getValue() < 6（1=Mon,7=Sun） - 别忘了同时校验是否在业务允许范围内（如不能选过去三天，或不能超三个月）
真正起作用的永远是后端逻辑；前端所有“限制”只是减少用户误操作，不是安全边界。
