如何在HTML5的<input type="date"/>中禁用节假日日期？

原生的<input type="date"/>本身没有直接禁用特定日期的属性，不过可以通过前端逻辑拦截用户选择节假日的操作，下面是几种可行的实现方式：

1. 纯原生JS拦截（基础版） #

先提前定义好需要禁用的节假日日期列表，然后监听组件的change事件，判断用户选中的日期是否在禁用列表里，如果是则重置输入框并提示用户。

示例代码：

<input type="date" id="datePicker">
<script>
// 定义禁用的节假日，格式要和input返回的日期字符串一致（YYYY-MM-DD）
const disabledHolidays = ['2024-01-01', '2024-02-10', '2024-02-11', '2024-02-12'];

const datePicker = document.getElementById('datePicker');
datePicker.addEventListener('change', function() {
  const selectedDate = this.value;
  if (disabledHolidays.includes(selectedDate)) {
    // 重置输入框
    this.value = '';
    alert('该日期为节假日，无法选择');
  }
});
</script>

2. 结合日期库简化处理（进阶版） #

如果需要处理更复杂的日期逻辑（比如判断农历节假日、动态生成假期），可以用Day.js这类轻量日期库来简化日期格式转换和对比。

示例代码（需先引入Day.js库）：

<input type="date" id="datePicker">
<script>
// 假设这里是从接口或配置拿到的节假日列表，支持不同格式转换
const disabledHolidays = ['2024-01-01', '2024-02-10'];

const datePicker = document.getElementById('datePicker');
datePicker.addEventListener('change', function() {
  const selectedDate = dayjs(this.value).format('YYYY-MM-DD');
  if (disabledHolidays.includes(selectedDate)) {
    this.value = '';
    alert('节假日不可选');
  }
});
</script>

注：如果要处理农历节假日，还可以引入Day.js的农历插件扩展功能。

3. 后端配合动态获取节假日（实用版） #

如果节假日需要实时更新（比如调休补班的情况），可以通过后端接口获取最新的禁用日期列表，前端拿到后再进行拦截判断，这样维护起来更灵活。

示例逻辑：

// 先从后端获取禁用日期
fetch('/api/get-disabled-holidays')
  .then(res => res.json())
  .then(data => {
    const disabledHolidays = data.holidays;
    const datePicker = document.getElementById('datePicker');
    datePicker.addEventListener('change', function() {
      if (disabledHolidays.includes(this.value)) {
        this.value = '';
        alert('该日期不可选择');
      }
    });
  });

需要注意的是，前端拦截仅能防止普通用户的误操作，若要严格限制，还需在后端进行二次校验，避免用户通过控制台篡改日期提交。

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