views/reserverPdate.ejs

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
      integrity="correct-integrity-value"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="/css/patient.css" />
    <link rel="stylesheet" href="/css/patientReserve.css"/>
    <title>shifa</title>
  </head>
  <body>
    <div class="liner">
        <aside>
                <div class="user">
                    <img src="/iconsP/icons8-user-50.png" alt="User image">
                    <div>
                      <h2><%= nom %> <%= prenom %></h2>
                      <p><%= email.substring(0, 20) + '...' %></p>
                    </div>
                </div>
    
                <ul class="UL_aside">
                  <a href="/patient/accueil"><li><img src="/iconsP/icons8-dashboard-layout-48.png" alt="">Accueil</li></a>
                  <a href="/patient/reserver"><li><img src="/iconsP/icons8-reservation-50.png" alt="">Reserver</li></a>
                  <a href="/patient/myreservations"><li><img src="/iconsP/icons8-bookmark-48.png" alt="">Mes Reservation</li></a>
                  <a href="/patient/Settings"><li><img src="/iconsP/icons8-settings-50.png" alt="">Settings</li></a>
              </ul>
    
            <form action="/logout" method="post">
                <button type="submit" class="Logout"><i class="fas fa-power-off"></i> <p>Logout</p></button>
            </form>
            <div class="spacer"></div>
        </aside>
    
        <main>
            <header>
              <h2><a href="/patient/reserver">Réserver</a> | Date</h2>
            </header>
    
            <div class="Codeholder">
              <div class="informations_date">
                <section class="section_logo">
                  <h1 class="logo">Shifa logo</h1>
                  <span>votre sante en ligne</span>
                </section>
                <div class="paragraphes">
                  <p class="p1">Sélectionnez une date pour le rendez-vous</p>
                  <p class="p2">
                    Les dates signalées par une couleur rouge sont déjà réservées.
                  </p>
                </div>
              </div>
              <div class="dates" id="daysContainer">
               
              </div>
               <form action="/patient/reserver/date" method="post">
                <button class="btn" type="submit" id="hiddenDate" name="hiddendate">
                  choisir l'heure
                  <div></div>
                </button>
               </form> 

               <div class="separator"></div>
            </div>
          </main>
        </div>
        <script>
          const hiddendate = document.getElementById("hiddenDate")
          const dates = document.getElementsByClassName("dates")[0];
          var deniedTable = <%- JSON.stringify(NotAllowedDate) %> ; 
          // Get the container where we'll append the divs
var daysContainer = document.getElementById('daysContainer');

// Get today's date
var today = new Date();
var tomorrow = new Date(today);
tomorrow.setDate(tomorrow.getDate() + 1);

// Loop to create 15 divs for the next 15 days
for (var i = 0; i < 15; i++) {
  // Create a new date for each day
  var nextDay = new Date(tomorrow);
  nextDay.setDate(tomorrow.getDate() + i);

  // Format the date as "yyyy-mm-dd"
  var formattedDate = nextDay.toISOString().split('T')[0];


  // Create a new div element with the "date" class
  var dateDiv = document.createElement('div');
  
  if (deniedTable.indexOf(formattedDate) !== -1) {
    dateDiv.classList.add('deniedDate');
  }else{
    dateDiv.classList.add('date');
  }

  // Create a new div element for the background date
  var bgDateDiv = document.createElement('div');
  bgDateDiv.classList.add('bgdate');
  
  // Create a new span element for the formatted date
  var spanDate = document.createElement('span');
  spanDate.textContent = formattedDate;

  // Append the background date div and the span to the date div
  dateDiv.appendChild(bgDateDiv);
  dateDiv.appendChild(spanDate);

  // Append the date div to the container
  daysContainer.appendChild(dateDiv);
}


          dates.addEventListener("click", (e) => {
            var target = e.target;
            if (
              target.classList.contains("date") ||
              target.parentElement.classList.contains("date")
            ) {
              for (let i = 0; i < dates.children.length; i++) {
                if (dates.children[i].classList.contains("date_checked")) {
                  dates.children[i].classList.remove("date_checked");
                }
              }
              if (target.parentElement.classList.contains("date")) {
                target = target.parentElement;
              }
              target.classList.toggle("date_checked");
            }

        if(target.classList.contains("date")){
          hiddendate.value = target.textContent.trim()
        }else if( target.parentElement.classList.contains("date")){
          hiddendate.value = target.parentElement.textContent.trim()
        }

        if(target.classList.contains("deniedDate") ||
           target.classList.contains("deniedDate")){
            for (let i = 0; i < dates.children.length; i++) {
                if (dates.children[i].classList.contains("date_checked")) {
                  dates.children[i].classList.remove("date_checked");
              }
            }
            hiddendate.value = "";
        }
        console.log(hiddendate.value);
          });
        </script>
    </body>
</html>