如何让日期输入框仅允许选择指定星期几的日期？

我有一个包含周日至周六各日期输入框的HTML脚本，希望对输入进行验证，使用户只能选择对应星期几的日期。例如，2024年12月1日是周日，用户只能在周日的输入框中输入12月1日、8日、15日、22日等日期，不能输入12月2日或3日。

原HTML代码：

<table>
 <tbody>
 <tr>
  <td><label for="date">Sunday:</label></td>
  <td><label for="date">Monday:</label></td>
  <td><label for="date">Tuesday:</label></td>
  <td><label for="date">Wednesday:</label></td>
  <td><label for="date">Thursday:</label></td>
  <td><label for="date">Friday:</label></td>
  <td><label for="date">Saturday:</label></td>
 </tr>
  <tr>
  <td><input name="date" type="text" style="width:130px" onfocus="(this.type='date')" onblur="if(!this.value){this.type='text';this.style.width='130px'}"></td>
  <td><input name="date" type="text" style="width:130px" onfocus="(this.type='date')" onblur="if(!this.value){this.type='text';this.style.width='130px'}"></td>
  <td><input name="date" type="text" style="width:130px" onfocus="(this.type='date')" onblur="if(!this.value){this.type='text';this.style.width='130px'}"></td>
  <td><input name="date" type="text" style="width:130px" onfocus="(this.type='date')" onblur="if(!this.value){this.type='text';this.style.width='130px'}"></td>
  <td><input name="date" type="text" style="width:130px" onfocus="(this.type='date')" onblur="if(!this.value){this.type='text';this.style.width='130px'}"></td>
  <td><input name="date" type="text" style="width:130px" onfocus="(this.type='date')" onblur="if(!this.value){this.type='text';this.style.width='130px'}"></td>
  <td><input name="date" type="text" style="width:130px" onfocus="(this.type='date')" onblur="if(!this.value){this.type='text';this.style.width='130px'}"></td>
 </tr>
 <tr>
<table>

已知getDay()方法返回日期对应的星期几（0到6，0代表周日），示例代码：

<p id="date1"></p>

const weekday = new Date("December 01, 2024 01:15:00");
let day = weekday.getDay()

document.getElementById("date1").innerHTML = day;

当前遇到的问题：下面的脚本不管选什么日期（包括周日）都会弹出提示，加else语句后又完全不弹出（连周一到周六的错误输入也没提示），应该是else写法有问题：

function validateDate(date) {
    const selectedDate = new Date(date);
    const day = selectedDate.getDay();
    if (day !== 0) {
        alert("Please select a date that falls on a Sunday.");}
}

1. 核心问题分析 #

你的问题根源有两个：一是原函数只固定验证“是否为周日”，没有对应每个输入框的目标星期；二是没处理日期解析失败的情况——如果输入的日期格式不对，new Date()会返回无效日期，getDay()得到NaN，NaN !== 0是true，所以不管选啥都会弹提示。

2. 修改HTML结构 #

给每个输入框加data-target-day属性，对应目标星期（0=周日，1=周一…6=周六），同时修正label的for属性（每个label要对应输入框的id，不然点标签没法聚焦到对应输入框），还要给输入框绑定onchange事件触发验证：

<table>
 <tbody>
 <tr>
  <td><label for="sunday-date">Sunday:</label></td>
  <td><label for="monday-date">Monday:</label></td>
  <td><label for="tuesday-date">Tuesday:</label></td>
  <td><label for="wednesday-date">Wednesday:</label></td>
  <td><label for="thursday-date">Thursday:</label></td>
  <td><label for="friday-date">Friday:</label></td>
  <td><label for="saturday-date">Saturday:</label></td>
 </tr>
  <tr>
  <td><input id="sunday-date" name="sunday-date" type="text" style="width:130px" data-target-day="0" onfocus="this.type='date'" onblur="if(!this.value){this.type='text';this.style.width='130px'}" onchange="validateDate(this)"></td>
  <td><input id="monday-date" name="monday-date" type="text" style="width:130px" data-target-day="1" onfocus="this.type='date'" onblur="if(!this.value){this.type='text';this.style.width='130px'}" onchange="validateDate(this)"></td>
  <td><input id="tuesday-date" name="tuesday-date" type="text" style="width:130px" data-target-day="2" onfocus="this.type='date'" onblur="if(!this.value){this.type='text';this.style.width='130px'}" onchange="validateDate(this)"></td>
  <td><input id="wednesday-date" name="wednesday-date" type="text" style="width:130px" data-target-day="3" onfocus="this.type='date'" onblur="if(!this.value){this.type='text';this.style.width='130px'}" onchange="validateDate(this)"></td>
  <td><input id="thursday-date" name="thursday-date" type="text" style="width:130px" data-target-day="4" onfocus="this.type='date'" onblur="if(!this.value){this.type='text';this.style.width='130px'}" onchange="validateDate(this)"></td>
  <td><input id="friday-date" name="friday-date" type="text" style="width:130px" data-target-day="5" onfocus="this.type='date'" onblur="if(!this.value){this.type='text';this.style.width='130px'}" onchange="validateDate(this)"></td>
  <td><input id="saturday-date" name="saturday-date" type="text" style="width:130px" data-target-day="6" onfocus="this.type='date'" onblur="if(!this.value){this.type='text';this.style.width='130px'}" onchange="validateDate(this)"></td>
 </tr>
 </tbody>
</table>

3. 修正验证函数 #

改成接收输入框元素作为参数，获取它的目标星期值，同时处理无效日期的情况：

function validateDate(inputElement) {
    const dateValue = inputElement.value;
    if (!dateValue) return; // 空值不用验证

    const selectedDate = new Date(dateValue);
    // 检查日期是否有效
    if (isNaN(selectedDate.getTime())) {
        alert("Please enter a valid date.");
        inputElement.value = "";
        return;
    }

    const selectedDay = selectedDate.getDay();
    const targetDay = parseInt(inputElement.dataset.targetDay);
    const weekdayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];

    if (selectedDay !== targetDay) {
        alert(`Please select a date that falls on ${weekdayNames[targetDay]}.`);
        inputElement.value = ""; // 清空错误输入
    }
}

4. 原问题的具体原因 #

• 原函数只验证是否为周日（day !== 0），没对应每个输入框的目标星期，而且如果日期解析失败得到NaN，NaN !== 0是true，所以不管选啥都会弹提示。
• 加else后完全不弹，大概率是你把alert写在了else里，而NaN的情况没处理，导致所有情况都触发不了提示。

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