Quelle est la manière de restreindre certains jours spécifiques de la semaine dans input type=date ?

Question

Le principal problème est que je peux sélectionner du lundi au dimanche, mais je souhaite limiter mardi, jeudi, samedi et dimanche et sélectionner uniquement lundi, mercredi et vendredi. Voici le code que j'ai essayé mais je ne sais pas vraiment pourquoi il ne fonctionne pas :

Merci ! ! ! !

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

Le but est de sélectionner uniquement lundi, mercredi et vendredi

Answer 1

Votre problème semble être que vous attachez un écouteur à l'événement de changement de l'entrée, puis que vous renvoyez false à cet événement.

Si vous souhaitez sélectionner uniquement les jours impairs (en fonction des numéros de jours ECMAScript), la fonction renvoie simplement le résultat de !!(dayNum % 2).

La valeur de la date de type d'entrée est un horodatage au format AAAA-MM-JJ, elle sera analysée au format UTC, donc si vous utilisez new Date(value), vous devez obtenir la date UTC.

La logique est illustrée ci-dessous à travers l'affichage d'un message qui annule intentionnellement la soumission du formulaire pour afficher le succès et l'échec sans soumission.

Il existe de nombreuses autres façons d'obtenir le même résultat, par exemple vous pouvez utiliser valueAsDate au lieu d'appeler le constructeur Date. Vous pouvez également utiliser un tableau de dates autorisées ou non et le tester, etc.

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>