HTML原生input[type="date"]无法限制仅选周末，因不支持语义化日期过滤；需用JavaScript监听input/change事件，通过getDay()校验并setCustomValidity提示，或改用flatpickr等支持disable函数的第三方组件。
HTML原生input[type="date"]无法限制周末选择
直接用<input type="date">做不到只选周末——它不支持min/max以外的日期逻辑过滤，也没有disabledDates或isWeekend这类属性。浏览器原生控件只认连续时间范围，不理解“周六/周日”这种语义。
必须用JavaScript动态禁用工作日
核心思路是监听input事件 + 检查用户选中的日期是否为周末（getDay()返回0或6），如果不是，就清空或回退到上一个有效值。但更友好的做法是在日历弹出后实时禁用非周末日期，这需要拦截渲染逻辑——而原生日历不可控，所以实际只能做「选后校验 + 强制纠正」。
常见错误现象：
– 用户点了周一，输入框显示该日期，但没提示、也没阻止；
– 用onchange校验时，已触发表单提交或后续逻辑；
– 只禁用input但未同步禁用键盘输入（如手动输2024-04-01）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 同时监听
input和change事件，覆盖鼠标点选和键盘输入场景 - 用
setCustomValidity()触发原生校验气泡，比alert更符合表单习惯 - 校验函数中用
new Date(value).getDay()判断，注意value为空字符串时会得到Invalid Date，需先守卫 - 示例逻辑：
const dateInput = document.querySelector('input[type="date"]');
dateInput.addEventListener('input', () => {
if (!dateInput.value) return;
const d = new Date(dateInput.value);
if (d.getDay() !== 0 && d.getDay() !== 6) {
dateInput.setCustomValidity('请只选择周六或周日');
} else {
dateInput.setCustomValidity('');
}
});
想真禁用日历里的工作日？得换第三方组件
像flatpickr、dayjs配合react-datepicker等库才支持disable选项传入函数，例如：
flatpickr("#date", {
disable: [
function(date) {
return date.getDay() !== 0 && date.getDay() !== 6;
}
]
});
但要注意：
– flatpickr的disable函数接收的是Date对象，不是字符串；
– 如果项目已用Vue/React，优先选生态内方案（如@vueuse/core的useDateFormat配合自定义规则）；
– 所有JS方案都无法阻止用户绕过前端（比如禁用JS后直接提交），服务端必须二次校验date.getDay() % 6 === 0（0=周日，6=周六）。
移动端iOS/Android的兼容性陷阱
iOS Safari的input[type="date"]会调起原生日历，完全不响应disable或CSS样式；Android部分厂商浏览器甚至不触发input事件。这意味着：
- 纯前端限制在移动端大概率失效
- 不能依赖
:disabled伪类隐藏工作日（原生日历不支持） - 如果业务强依赖周末选择，建议改用两个
select下拉：一个选「周六/周日」，一个选具体日期（用date-fns生成未来8个周末）
最易被忽略的一点：周日是getDay() === 0，不是7——很多人在这里写错条件，导致周日也被禁掉。
