Apakah cara untuk menyekat beberapa hari tertentu dalam seminggu dalam input type=date?

Question

Masalah utama ialah saya boleh memilih Isnin hingga Ahad, tetapi saya ingin mengehadkan hari Selasa, Khamis, Sabtu dan Ahad dan hanya pilih Isnin, Rabu dan Jumaat Ini adalah kod yang saya cuba tetapi saya sebenarnya tidak tahu mengapa ia tidak berfungsi:

Terima kasih! ! ! !

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

Tujuannya untuk memilih Isnin, Rabu dan Jumaat sahaja

Answer 1

Masalah anda nampaknya ialah anda melampirkan pendengar kepada peristiwa perubahan input dan kemudian mengembalikan palsu kepada acara itu.

Jika anda hanya mahu memilih hari ganjil (berdasarkan nombor hari ECMAScript), fungsi tersebut hanya mengembalikan hasil !!(dayNum % 2).

Nilai tarikh jenis input ialah cap masa dalam format YYYY-MM-DD, ia akan dihuraikan sebagai UTC, jadi jika menggunakan new Date(value) anda perlu mendapatkan tarikh UTC.

Logik digambarkan di bawah melalui paparan mesej yang sengaja membatalkan penyerahan borang, dengan itu memaparkan kejayaan dan kegagalan tanpa penyerahan.

Terdapat banyak cara lain untuk mencapai hasil yang sama, contohnya anda boleh menggunakan valueAsDate dan bukannya memanggil pembina Tarikh. Anda juga boleh menggunakan pelbagai tarikh yang dibenarkan atau tidak dibenarkan dan mengujinya, dsb.

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>