如何在 HTML 原生日期选择器中禁用过去日期、未来两天、以及周一和周日-html教程-PHP中文网

如何在 HTML 原生日期选择器中禁用过去日期、未来两天、以及周一和周日

HTML 原生无法直接禁用特定星期几（如周一、周日），但可通过 min 属性限制日期范围，并结合 change 事件校验并拒绝非法星期，实现功能闭环。

html 原生 `` 无法直接禁用特定星期几（如周一、周日），但可通过 `min` 属性限制日期范围，并结合 `change` 事件校验并拒绝非法星期，实现功能闭环。

在实际业务场景中（例如物流预约、服务调度），常需限制用户可选日期：既不能选择过去日期，也不能选择太近的未来日期（如需预留处理时间），同时还需避开非工作日（如周日、周一）。遗憾的是，HTML 原生日期选择器仅支持 min 和 max 属性控制日期范围，不支持按星期几动态禁用选项。因此，我们必须采用“范围限制 + 实时校验”的组合方案。

✅ 正确实现逻辑

设置最小可选日期：当前日期 + 2 天（即禁用今天及之前、以及明天共 2 天内的所有日期）；
监听 change 事件：当用户选定日期后，立即解析该日期，检查其星期几（getDay() 返回 0 为周日，1 为周一）；
即时反馈与重置：若为周日或周一，弹出提示并清空输入值，强制用户重新选择。

以下是完整、健壮的实现代码：

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

<label>Pickup Date: </label>
<input class="datepicker" type="date" name="delivery_date" id="txtDate" required><script>
  function formatDate(date) {
    const y = date.getFullYear();
    const m = String(date.getMonth() + 1).padStart(2, '0');
    const d = String(date.getDate()).padStart(2, '0');
    return `${y}-${m}-${d}`;
  }

  // 设置最小可选日期：今日 + 2 天
  const minDate = new Date();
  minDate.setDate(minDate.getDate() + 2);
  document.getElementById('txtDate').min = formatDate(minDate);

  // 校验所选日期是否为周日（0）或周一（1）
  document.getElementById('txtDate').addEventListener('change', function (e) {
    const selected = e.target.value;
    if (!selected) return; // 忽略清空操作

    const date = new Date(selected);
    const dayOfWeek = date.getDay(); // 0=Sunday, 1=Monday, ..., 6=Saturday

    if (dayOfWeek === 0 || dayOfWeek === 1) {
      alert('❌ Sunday and Monday are not available for pickup.');
      e.target.value = ''; // 清空非法选择
      e.target.focus();    // 便于用户立即重选
    }
  });
</script>