Wie können bestimmte Wochentage im Eingabetyp=Datum eingeschränkt werden?

Question

Das Hauptproblem besteht darin, dass ich Montag bis Sonntag auswählen kann, ich aber Dienstag, Donnerstag, Samstag und Sonntag einschränken und nur Montag, Mittwoch und Freitag auswählen möchte Dies ist der Code, den ich ausprobiert habe, aber ich weiß eigentlich nicht, warum er nicht funktioniert:

Danke! ! ! !

<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>

Der Zweck besteht darin, nur Montag, Mittwoch und Freitag auszuwählen

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>