如何在HTML5原生日期选择器中屏蔽本地节假日及周日？

首先明确结论：原生<input type="date">本身不支持通过属性直接在min/max范围内屏蔽特定日期或周几，但完全可以通过原生JavaScript实现功能层面的屏蔽，不需要依赖第三方资源。

核心实现思路 #

原生控件的弹窗样式和可选日期的视觉屏蔽是由浏览器/系统底层控制的，无法通过HTML属性直接修改，但我们可以通过用户选择后的校验拦截来达到禁止选择的效果，具体方案如下：

1. 屏蔽周日的实现

利用Date对象的getDay()方法（返回值0代表周日，1-6代表周一到周六），在用户选择日期后做校验：

<input type="date" id="datePicker" min="2024-01-01" max="2024-12-31">

<script>
const datePicker = document.getElementById('datePicker');

datePicker.addEventListener('change', function() {
  const selectedDate = new Date(this.value);
  // 判断是否为周日（getDay()返回0）
  if (selectedDate.getDay() === 0) {
    alert('周日不可选');
    this.value = ''; // 清空选择
  }
});
</script>

2. 屏蔽本地节假日的实现

先维护一个本地节假日日期数组，再在选择事件中校验选中日期是否在数组内：

<input type="date" id="datePicker" min="2024-01-01" max="2024-12-31">

<script>
const datePicker = document.getElementById('datePicker');
// 本地节假日列表，可根据需求动态更新
const holidayList = ['2024-01-01', '2024-02-10', '2024-02-11', '2024-04-04'];

datePicker.addEventListener('change', function() {
  const selectedDateStr = this.value;
  // 判断是否为节假日
  if (holidayList.includes(selectedDateStr)) {
    alert('该日期为节假日，不可选');
    this.value = ''; // 清空选择
  }
});
</script>

3. 组合校验（同时屏蔽周日+节假日）

把两个校验逻辑合并即可：

datePicker.addEventListener('change', function() {
  const selectedDate = new Date(this.value);
  const selectedDateStr = this.value;

  // 周日校验
  if (selectedDate.getDay() === 0) {
    alert('周日不可选');
    this.value = '';
    return;
  }

  // 节假日校验
  if (holidayList.includes(selectedDateStr)) {
    alert('该日期为节假日，不可选');
    this.value = '';
  }
});

4. 额外优化：表单提交前二次校验

为了防止用户绕过前端直接提交（比如通过控制台修改input值），可以在表单提交时再做一次校验：

<form id="dateForm">
  <input type="date" id="datePicker" min="2024-01-01" max="2024-12-31">
  <button type="submit">提交</button>
</form>

<script>
const dateForm = document.getElementById('dateForm');
const datePicker = document.getElementById('datePicker');
const holidayList = ['2024-01-01', '2024-02-10'];

dateForm.addEventListener('submit', function(e) {
  const selectedDate = new Date(datePicker.value);
  const selectedDateStr = datePicker.value;

  // 校验逻辑
  if (selectedDate.getDay() === 0 || holidayList.includes(selectedDateStr)) {
    e.preventDefault(); // 阻止表单提交
    alert('选中日期不可用，请重新选择');
  }
});
</script>

局限性说明 #

原生<input type="date">无法在弹窗里把禁止选择的日期灰掉（这是浏览器控件的固有限制），但上述方案可以在用户选择后立即拦截，完全满足功能需求，且不需要适配不同浏览器/设备的自定义组件逻辑，符合你优先使用原生技术的需求。

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