as you can see the pickadate.js is not hiding the selectors properly resulting in a bad ui problem, everything is fine in my code after several check but i will post it anyways`

 <div class="glass container">
  <div class="container">
    <h2>Book Your Appointment</h2>
    <form action="/book-appointment" method="post">
      <label for="datePicker" id="date">Date</label>
      <input type="text" id="datePicker" name="date" />

      <label for="timePicker" id="time">Time</label>
      <input type="text" id="timePicker" name="time" />

      <label for="name">Name</label>
      <input type="text" id="name" name="name" />

      <label for="email">Email</label>
      <input type="email" id="email" name="email" />

      <label for="phone">Phone</label>
      <input type="tel" id="phone" name="phone" />

      <button type="submit" class="book-now-btn">Book Now</button>
    </form>
  </div>
</div>

 $(document).ready(function () {
        $("#datePicker").pickadate({
          format: "yyyy-mm-dd",
        });
        $("#timePicker").pickatime({
          format: "h:i A",
          interval: 60, // Adjust as needed
        });
      });

there is no css currently in the project rather then minor things that i’m sure are not messing around with the picker. i hope somebody can resolve this because is a week already

i tried switching pickadate version, no results.
using a class for forcing the selector to be hidden and to toggle the class on label-click but this results in breaking the plugin