如何在HTML5 date类型输入框中禁用所有周末？

嘿，这个需求挺常见的！可惜原生HTML5的<input type="date">并没有内置属性直接禁用周末，不过咱们用几行JavaScript就能轻松实现这个功能。

先看你的基础HTML代码（注意：原生date输入不支持format属性，浏览器会根据系统区域自动适配日期显示格式，但这不影响咱们的禁用逻辑）：

<input id="date1" size="60" type="date" placeholder="选择日期" />

接下来添加JavaScript逻辑，核心思路是监听日期选择/输入事件，校验选中日期是否为周末，若是则清空输入并提示用户：

// 获取日期输入框元素
const dateInput = document.getElementById('date1');

// 定义校验周末的函数
function checkForWeekend(e) {
  const selectedDate = new Date(e.target.value);
  // getDay() 返回值：0(周日) ~ 6(周六)
  const dayOfWeek = selectedDate.getDay();
  
  // 判断是否是周六或周日
  if (dayOfWeek === 0 || dayOfWeek === 6) {
    // 清空输入框
    e.target.value = '';
    // 友好提示用户
    alert('抱歉，不能选择周末日期！');
  }
}

// 绑定事件监听：同时覆盖手动输入和日历选择两种场景
dateInput.addEventListener('input', checkForWeekend);
dateInput.addEventListener('change', checkForWeekend);

小补充： #

• 同时监听input和change是为了覆盖两种操作场景：用户手动敲入日期、用户通过日历控件选择日期。
• 不同浏览器的原生date日历控件表现略有差异，有些没法直接阻止用户点击周末选项，但咱们的逻辑能在用户选择后立即校验并重置，同样能达到禁用的效果。
• 如果觉得弹窗提示不够友好，可以换成页面内的文本提示，比如在输入框下方加个<span id="dateTip"></span>，然后在函数里修改这个span的内容即可。

内容的提问来源于stack exchange，提问作者kaplievabell