限制input type=date中的某些特定星期幾的方法是什麼？

Question

主要問題是我可以選擇週一到週日，而我想限制週二、週四、週六和週日，只選擇週一、週三和週五 這是我嘗試過的程式碼，但我實際上不知道為什麼它不起作用：

謝謝！ ！ ！ ！

<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); // obtiene el número del día de la semana (1 = lunes, 2 = martes, etc.)
            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>// Everything except weekend days
        const validate = dateString => {
        const day = (new Date(dateString)).getDay();
        if (day==2 || day==4 || day==6 || day==0 ) {
            return false;
        }
        return true;
        }

        // Sets the value to '' in case of an invalid date
        document.querySelector('input').onchange = evt => {
        if (!validate(evt.target.value)) {
            evt.target.value = '';
        }
        }
    </script>

目的是只選擇週一、週三和週五

Answer 1

您的問題似乎是您將偵聽器附加到輸入的變更事件，然後向該事件傳回 false。

如果您只想選擇奇數天（基於 ECMAScript 天編號），則函數只需傳回 !!(dayNum % 2) 的結果。

輸入類型日期的值是格式為 YYYY-MM-DD 的時間戳，它將被解析為 UTC，因此如果使用 new Date(value) 您需要取得 UTC 日期.

下面透過一則訊息的顯示來說明邏輯，故意取消表單提交，從而在不提交的情況下顯示成功和失敗。

還有許多其他方法可以實現相同的結果，例如您可以使用 valueAsDate 而不是而不是呼叫 Date 建構子。您還可以使用允許或不允許的日期數組並對其進行測試，等等。

window.onload = () => {

  // Related elements
  let form = document.getElementById('calendar');
  let msg = document.getElementById('msg');
  
  // The listener
  let checkDate = evt => {
  
    // Cancel submit if called from submit
    if (evt.type == 'submit') evt.preventDefault();
    
    // Value parsed as UTC so get UTC day
    let day = new Date(form.theDate.value).getUTCDay();
    // Check if day is valid
    let isValid = !!(day % 2);
    
    // Do stuff based on whether isValid is true or false
    // Show message based on selected day
    let days = ['Sunday','Monday','Tuesday','Wednesay','Thursday','Friday','Saturday']
    msg.textContent = `Selected day is ${days[day]}, ` +
      `${isValid? 'pass.' : 'fail. Must be a Monday, Wednesday or Friday'}`;
      
    return isValid;
  }
  
  // Attach listeners - deal with form being submitted without setting a date
  form.addEventListener('change', checkDate);
  form.addEventListener('submit', checkDate);
}

#msg {
  color: #999999;
  font-family: sans-serif;
}

<form id="calendar" onsubmit="return false">
  <label for="theDate">Date:</label>
  <input type="date" id="theDate" name="theDate">
  <span id="msg"></span><br>
  <button>Submit</button>
</form>