如何使用原生JavaScript禁用<input type="date">中的特定日期

当然可以用原生JS实现，HTML原生的input[type="date"]本身没有直接设置禁用零散日期的属性，但我们可以通过两种思路解决：

1. 限制连续日期范围（适合批量禁用时段） #

如果不可预订的日期是连续区间（比如过去的所有日期、未来N天后的日期），直接用min和max属性配合JS动态设置就行：

<input type="date" id="hotelBookingDate">

const dateInput = document.getElementById('hotelBookingDate');
const today = new Date();

// 禁用今天之前的所有日期
const minValidDate = today.toISOString().split('T')[0];
dateInput.min = minValidDate;

// 示例：禁用30天后的所有日期
const maxValidDate = new Date(today.setDate(today.getDate() + 30)).toISOString().split('T')[0];
dateInput.max = maxValidDate;

2. 禁用零散特定日期（适合非连续的不可预订日） #

如果要禁用零散的日期（比如节假日、已被预订的日期），可以监听输入框的input事件，校验用户选择的日期是否在禁用列表里，不符合就重置输入并提示：

<input type="date" id="hotelBookingDate">
<p id="dateError" style="color: red; display: none;">这个日期已经被订满啦，换个日期试试？</p>

const dateInput = document.getElementById('hotelBookingDate');
const errorTip = document.getElementById('dateError');
// 模拟不可预订的日期，格式必须是YYYY-MM-DD
const disabledDates = ['2024-06-15', '2024-06-20', '2024-06-25'];

dateInput.addEventListener('input', function() {
  const selected = this.value;
  if (disabledDates.includes(selected)) {
    this.value = '';
    errorTip.style.display = 'block';
  } else {
    errorTip.style.display = 'none';
  }
});

注意事项 #

原生浏览器的日期选择器UI没有提供直接灰掉特定日期的API，上面的方法是用户选择后校验拦截。如果需要在日历弹窗里直接视觉化禁用日期，就得自己写自定义日期选择器组件，或者用原生JS模拟实现日历UI，这样能完全控制每个日期的可点击状态。

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