如何让HTML日期/日期时间选择器仅允许选择特定星期几？

原生HTML的date或datetime-local控件仅靠min、max、step这些属性无法实现只允许选择周六周日的需求——因为step只能设置固定的时间间隔（比如每天、每7天），没法跳过工作日只保留周末日期。要从源头限制可选范围，必须结合JavaScript或者第三方日期选择器库。

方案一：原生控件结合JavaScript校验与拦截 #

这种方案尽量保留原生控件的样式，通过JS过滤无效日期，有两种思路：

1. 选择后校验并修正 #

当用户选择非周末日期时，直接清空输入或自动调整到最近的周末，同时给出提示：

<label for="weekend-date">选择周末日期：</label>
<input type="date" id="weekend-date">

<script>
const dateInput = document.getElementById('weekend-date');

// 判断日期是否为周六（6）或周日（0）
function isWeekend(date) {
  const day = date.getDay();
  return day === 0 || day === 6;
}

dateInput.addEventListener('change', function() {
  const selectedDate = new Date(this.value);
  if (!isWeekend(selectedDate)) {
    this.value = '';
    alert('仅支持选择周六或周日');
  }
});
</script>

2. 拦截日历控件的日期点击（兼容性有限） #

部分浏览器（如Chrome）的原生日历有可遍历的DOM节点，可以通过JS禁用非周末日期的点击事件。但注意：不同浏览器的日历DOM结构不统一，这个方法可能在Firefox、Safari等浏览器失效：

<input type="date" id="weekend-date">

<script>
const dateInput = document.getElementById('weekend-date');
function isWeekend(date) {
  const day = date.getDay();
  return day === 0 || day === 6;
}

// 聚焦后等待日历渲染，再禁用非周末日期
dateInput.addEventListener('focus', function() {
  setTimeout(() => {
    // Chrome中日期单元格的类名为`day`，不同浏览器可能不同
    const dateCells = document.querySelectorAll('.day');
    dateCells.forEach(cell => {
      const cellDate = new Date(cell.getAttribute('data-date'));
      if (!isWeekend(cellDate)) {
        cell.style.pointerEvents = 'none';
        cell.style.opacity = '0.5';
      }
    });
  }, 500);
});
</script>

方案二：使用第三方日期选择器库（更稳定） #

如果需要跨浏览器稳定实现“源头限制”，推荐使用成熟的第三方日期选择器库，比如Flatpickr或Datepicker，这些库支持自定义禁用规则，可以直接配置只允许选择周六周日：

以Flatpickr为例：

<!-- 引入库的样式和脚本（可本地部署） -->
<link rel="stylesheet" href="flatpickr.min.css">
<script src="flatpickr.min.js"></script>

<label for="weekend-picker">选择周末日期：</label>
<input type="text" id="weekend-picker">

<script>
flatpickr('#weekend-picker', {
  // 只允许周六和周日
  enable: [
    function(date) {
      return date.getDay() === 0 || date.getDay() === 6;
    }
  ],
  dateFormat: 'Y-m-d',
  // 如果需要datetime-local的时间选择功能，开启以下配置
  // enableTime: true,
  // time_24hr: true,
  // datetimeFormat: 'Y-m-d H:i'
});
</script>

这种方案的优势是跨浏览器兼容，且能真正从源头限制用户选择无效日期，不需要事后校验。

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