如何通过input type=date限制仅选择周一、周三、周五？

你的代码无法生效主要是选择器匹配错误和缺少用户提示导致的，以下是修复后的完整实现方案：

问题分析 #

1. 原JS中document.querySelector('input')会匹配页面第一个input元素，而你的页面包含隐藏input，可能导致事件绑定到错误元素，无法监听日期输入框的变化。
2. 直接清空无效日期但无提示，用户无法理解操作被拒绝的原因。

修复后的完整代码 #

<form action="insertar_reserva_tarde.php" method="POST">
    <label for="fecReserva">Día:</label>
    <input type="date" name="fecReserva" id="fecReserva" min="2023-06-15" max="2023-07-15" required>
    <br>
    <label for="horIniReserva">Hora de inicio:</label>
    <select name="horIniReserva" id="horIniReserva">
        <option value="17">17:00</option>
        <option value="18">18:00</option>
        <option value="19">19:00</option>
        <option value="20">20:00</option>
    </select>
    <br>
    <label for="horFinReserva">Hora de fin:</label>
    <select name="horFinReserva" id="horFinReserva">
        <option value="18">18:00</option>
        <option value="19">19:00</option>
        <option value="20">20:00</option>
        <option value="21">21:00</option>
    </select>
    <br>
    <input type="hidden" name="pista" value="1">
    <input type="hidden" name="idHorario" value="1">
    <input type="submit" value="Reservar">
</form>
<?php
if(isset($_POST['fecReserva'])){
    $date = strtotime($_POST['fecReserva']);
    $dayOfWeek = date('N', $date); // 1 = 周一, 2 = 周二...7 = 周日
    if($dayOfWeek == 1 || $dayOfWeek == 3 || $dayOfWeek == 5){
        echo "<p>La fecha seleccionada es el ".date('d/m/Y', $date)."</p>";
    } else {
        echo "<p>Sólo se permiten reservas en Lunes, Miércoles y Viernes.</p>";
    }
}
?>
<script>
// 验证日期是否为周一、周三、周五
const validateDate = dateString => {
    const day = new Date(dateString).getDay();
    // getDay()返回值：0=周日,1=周一,2=周二,3=周三,4=周四,5=周五,6=周六
    return [1,3,5].includes(day);
}

// 监听日期输入框变化
document.getElementById('fecReserva').addEventListener('change', evt => {
    const selectedDate = evt.target.value;
    if (!validateDate(selectedDate)) {
        alert('Sólo se permiten reservas en Lunes, Miércoles y Viernes.');
        evt.target.value = '';
    }
});
</script>

关键修改点 #

• 精准选择元素：使用document.getElementById('fecReserva')直接定位日期输入框，避免匹配到其他input元素。
• 优化验证逻辑：用数组[1,3,5].includes(day)替代多个条件判断，代码更简洁易读。
• 增加用户提示：当选择无效日期时，通过alert给出明确提示，提升用户体验。
• 保留后端验证：前端验证仅为用户体验优化，后端的PHP验证是安全屏障，防止恶意绕过前端限制提交无效数据。

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