Html - Why doesn't my timepicker open when I click it?

RubberDuck
July 10, 2024
164 views
0 votes
2 Answers

I don’t understand why the time picker doesn’t open up. When I click it, nothing happens. Is it because I need JS for it to work properly?

<button type="button" data-modal-target="timepicker-modal" data-modal-toggle="timepicker-modal" class="w-[15rem] mr-[0.1rem] ml-[0.1rem] text-gray-900 bg-white border border-gray-200 focus:outline-none rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-gray-600 dark:bg-white dark:border-gray-700 dark:text-black-400 dark:focus:border-blue-500">Reisende og kabinklasse</button>

<!-- Main modal -->
<div id="timepicker-modal" tabindex="-1" aria-hidden="true" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
  <div class="relative p-4 w-full max-w-[23rem] max-h-full">
    <!-- Modal content -->
    <div class="relative bg-white rounded-lg shadow dark:bg-gray-800">
      <!-- Modal header -->
      <div class="flex items-center justify-between p-4 border-b rounded-t dark:border-gray-600">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
          Schedule an appointment
        </h3>
        <button type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm h-8 w-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-toggle="timepicker-modal">
            <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
            </svg>
            <span class="sr-only">Close modal</span>
        </button>
      </div>
      
      <!-- Modal body -->
      <div class="p-4 pt-0">
        <div inline-datepicker datepicker-autoselect-today class="mx-auto sm:mx-0 flex justify-center my-5 [&>div>div]:shadow-none [&>div>div]:bg-gray-50 [&_div>button]:bg-gray-50"></div>

        <label class="text-sm font-medium text-gray-900 dark:text-white mb-2 block">Pick your time</label>

        <ul id="timetable" class="grid w-full grid-cols-3 gap-2 mb-5">
          <li>
            <input type="radio" id="10-am" value="" class="hidden peer" name="timetable">
            <label for="10-am" class="inline-flex items-center justify-center w-full px-2 py-1 text-sm font-medium text-center hover:text-gray-900 dark:hover:text-white bg-white dark:bg-gray-800 border rounded-lg cursor-pointer text-gray-500 border-gray-200 dark:border-gray-700 dark:peer-checked:border-blue-500 peer-checked:border-blue-700 dark:hover:border-gray-600 dark:peer-checked:text-blue-500 peer-checked:bg-blue-50 peer-checked:text-blue-700 hover:bg-gray-50 dark:text-gray-400 dark:hover:bg-gray-600 dark:peer-checked:bg-blue-900">10:00 AM</label>
          </li>
          <li>
            <input type="radio" id="10-30-am" value="" class="hidden peer" name="timetable">
            <label for="10-30-am" class="inline-flex items-center justify-center w-full px-2 py-1 text-sm font-medium text-center hover:text-gray-900 dark:hover:text-white bg-white dark:bg-gray-800 border rounded-lg cursor-pointer text-gray-500 border-gray-200 dark:border-gray-700 dark:peer-checked:border-blue-500 peer-checked:border-blue-700 dark:hover:border-gray-600 dark:peer-checked:text-blue-500 peer-checked:bg-blue-50 peer-checked:text-blue-700 hover:bg-gray-50 dark:text-gray-400 dark:hover:bg-gray-600 dark:peer-checked:bg-blue-900">
                                    10:30 AM
                                    </label>
          </li>
          <li>
            <input type="radio" id="11-am" value="" class="hidden peer" name="timetable">
            <label for="11-am" class="inline-flex items-center justify-center w-full px-2 py-1 text-sm font-medium text-center hover:text-gray-900 dark:hover:text-white bg-white dark:bg-gray-800 border rounded-lg cursor-pointer text-gray-500 border-gray-200 dark:border-gray-700 dark:peer-checked:border-blue-500 peer-checked:border-blue-700 dark:hover:border-gray-600 dark:peer-checked:text-blue-500 peer-checked:bg-blue-50 peer-checked:text-blue-700 hover:bg-gray-50 dark:text-gray-400 dark:hover:bg-gray-600 dark:peer-checked:bg-blue-900">
                                    11:00 AM
                                    </label>
          </li>
          <li>
            <input type="radio" id="11-30-am" value="" class="hidden peer" name="timetable">
            <label for="11-30-am" class="inline-flex items-center justify-center w-full px-2 py-1 text-sm font-medium text-center hover:text-gray-900 dark:hover:text-white bg-white dark:bg-gray-800 border rounded-lg cursor-pointer text-gray-500 border-gray-200 dark:border-gray-700 dark:peer-checked:border-blue-500 peer-checked:border-blue-700 dark:hover:border-gray-600 dark:peer-checked:text-blue-500 peer-checked:bg-blue-50 peer-checked:text-blue-700 hover:bg-gray-50 dark:text-gray-400 dark:hover:bg-gray-600 dark:peer-checked:bg-blue-900">
                                    11:30 AM
                                    </label>
          </li>
          <li>
            <input type="radio" id="12-am" value="" class="hidden peer" name="timetable" checked>
            <label for="12-am" class="inline-flex items-center justify-center w-full px-2 py-1 text-sm font-medium text-center hover:text-gray-900 dark:hover:text-white bg-white dark:bg-gray-800 border rounded-lg cursor-pointer text-gray-500 border-gray-200 dark:border-gray-700 dark:peer-checked:border-blue-500 peer-checked:border-blue-700 dark:hover:border-gray-600 dark:peer-checked:text-blue-500 peer-checked:bg-blue-50 peer-checked:text-blue-700 hover:bg-gray-50 dark:text-gray-400 dark:hover:bg-gray-600 dark:peer-checked:bg-blue-900">
                                    12:00 AM
                                    </label>
          </li>
          <li>
            <input type="radio" id="12-30-pm" value="" class="hidden peer" name="timetable">
            <label for="12-30-pm" class="inline-flex items-center justify-center w-full px-2 py-1 text-sm font-medium text-center hover:text-gray-900 dark:hover:text-white bg-white dark:bg-gray-800 border rounded-lg cursor-pointer text-gray-500 border-gray-200 dark:border-gray-700 dark:peer-checked:border-blue-500 peer-checked:border-blue-700 dark:hover:border-gray-600 dark:peer-checked:text-blue-500 peer-checked:bg-blue-50 peer-checked:text-blue-700 hover:bg-gray-50 dark:text-gray-400 dark:hover:bg-gray-600 dark:peer-checked:bg-blue-900">
                                    12:30 PM
                                    </label>
          </li>
          <li>
            <input type="radio" id="1-pm" value="" class="hidden peer" name="timetable">
            <label for="1-pm" class="inline-flex items-center justify-center w-full px-2 py-1 text-sm font-medium text-center hover:text-gray-900 dark:hover:text-white bg-white dark:bg-gray-800 border rounded-lg cursor-pointer text-gray-500 border-gray-200 dark:border-gray-700 dark:peer-checked:border-blue-500 peer-checked:border-blue-700 dark:hover:border-gray-600 dark:peer-checked:text-blue-500 peer-checked:bg-blue-50 peer-checked:text-blue-700 hover:bg-gray-50 dark:text-gray-400 dark:hover:bg-gray-600 dark:peer-checked:bg-blue-900">
                                    01:00 PM
                                    </label>
          </li>
          <li>
            <input type="radio" id="1-30-pm" value="" class="hidden peer" name="timetable">
            <label for="1-30-pm" class="inline-flex items-center justify-center w-full px-2 py-1 text-sm font-medium text-center hover:text-gray-900 dark:hover:text-white bg-white dark:bg-gray-800 border rounded-lg cursor-pointer text-gray-500 border-gray-200 dark:border-gray-700 dark:peer-checked:border-blue-500 peer-checked:border-blue-700 dark:hover:border-gray-600 dark:peer-checked:text-blue-500 peer-checked:bg-blue-50 peer-checked:text-blue-700 hover:bg-gray-50 dark:text-gray-400 dark:hover:bg-gray-600 dark:peer-checked:bg-blue-900">
                                    01:30 PM
                                    </label>
          </li>
          <li>
            <input type="radio" id="2-pm" value="" class="hidden peer" name="timetable">
            <label for="2-pm" class="inline-flex items-center justify-center w-full px-2 py-1 text-sm font-medium text-center hover:text-gray-900 dark:hover:text-white bg-white dark:bg-gray-800 border rounded-lg cursor-pointer text-gray-500 border-gray-200 dark:border-gray-700 dark:peer-checked:border-blue-500 peer-checked:border-blue-700 dark:hover:border-gray-600 dark:peer-checked:text-blue-500 peer-checked:bg-blue-50 peer-checked:text-blue-700 hover:bg-gray-50 dark:text-gray-400 dark:hover:bg-gray-600 dark:peer-checked:bg-blue-900">
                                    02:00 PM
                                    </label>
          </li>
          <li>
            <input type="radio" id="2-30-pm" value="" class="hidden peer" name="timetable">
            <label for="2-30-pm" class="inline-flex items-center justify-center w-full px-2 py-1 text-sm font-medium text-center hover:text-gray-900 dark:hover:text-white bg-white dark:bg-gray-800 border rounded-lg cursor-pointer text-gray-500 border-gray-200 dark:border-gray-700 dark:peer-checked:border-blue-500 peer-checked:border-blue-700 dark:hover:border-gray-600 dark:peer-checked:text-blue-500 peer-checked:bg-blue-50 peer-checked:text-blue-700 hover:bg-gray-50 dark:text-gray-400 dark:hover:bg-gray-600 dark:peer-checked:bg-blue-900">
                                    02:30 PM
                                    </label>
          </li>
          <li>
            <input type="radio" id="3-pm" value="" class="hidden peer" name="timetable">
            <label for="3-pm" class="inline-flex items-center justify-center w-full px-2 py-1 text-sm font-medium text-center hover:text-gray-900 dark:hover:text-white bg-white dark:bg-gray-800 border rounded-lg cursor-pointer text-gray-500 border-gray-200 dark:border-gray-700 dark:peer-checked:border-blue-500 peer-checked:border-blue-700 dark:hover:border-gray-600 dark:peer-checked:text-blue-500 peer-checked:bg-blue-50 peer-checked:text-blue-700 hover:bg-gray-50 dark:text-gray-400 dark:hover:bg-gray-600 dark:peer-checked:bg-blue-900">
                                    03:00 PM
                                    </label>
          </li>
          <li>
            <input type="radio" id="3-30-pm" value="" class="hidden peer" name="timetable">
            <label for="3-30-pm" class="inline-flex items-center justify-center w-full px-2 py-1 text-sm font-medium text-center hover:text-gray-900 dark:hover:text-white bg-white dark:bg-gray-800 border rounded-lg cursor-pointer text-gray-500 border-gray-200 dark:border-gray-700 dark:peer-checked:border-blue-500 peer-checked:border-blue-700 dark:hover:border-gray-600 dark:peer-checked:text-blue-500 peer-checked:bg-blue-50 peer-checked:text-blue-700 hover:bg-gray-50 dark:text-gray-400 dark:hover:bg-gray-600 dark:peer-checked:bg-blue-900">
                                    03:30 PM
                                    </label>
          </li>
        </ul>
        <div class="grid grid-cols-2 gap-2">
          <button type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">Save</button>
          <button type="button" data-modal-hide="timepicker-modal" class="py-2.5 px-5 mb-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">Discard</button>
        </div>
      </div>
    </div>
  </div>
</div>

Answers

- RaheutRahwana
- July 10, 2024 at 6:55 pm
- 0 votes
0
Your modal structure (#timepicker-modal) appears correct in HTML, but its behavior (showing/hiding) is typically controlled by JavaScript event listeners (such as a click event on the toggle button). Therefore, yes, you do need JavaScript for it to function properly.

Login or Signup to reply.

Yes, you need to add JavaScript for this. Remember that HTML and CSS are the static part of an app and to make it dynamic we can use things like JavaScript. First let’s add an Id on the button to make it more easily selectable:

<button id="myButton" type="button" data-modal-target="timepicker-modal" data-modal-toggle="timepicker-modal" class="w-[15rem] mr-[0.1rem] ml-[0.1rem] text-gray-900 bg-white border border-gray-200 focus:outline-none rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-gray-600 dark:bg-white dark:border-gray-700 dark:text-black-400 dark:focus:border-blue-500">Reisende og kabinklasse</button>

And this for the close button:

<button id="myCloseButton" type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm h-8 w-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-toggle="timepicker-modal">
            <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
            </svg>
            <span class="sr-only">Close modal</span>
        </button>

Then we can add the behavior for the buttons using this:

// ...rest of the code

<script>
    document.addEventListener("DOMContentLoaded", function() {
        //note that on the HTML button I added an id="myButton"
        var button = document.getElementById("myButton");

        button.addEventListener("click", function() {
            
            document.getElementById("timepicker-modal").classList.remove("hidden");


        var closeButton = document.getElementById("myCloseButton");

        closeButton.addEventListener("click", function() {
            
            document.getElementById("timepicker-modal").classList.add("hidden");
        });
    });
</script>

This will make your modal to be visible, and you can add another one on a different button to make it hidden again by using add instead of remove.

Hope this helps!

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Why doesn't my timepicker open when I click it?

Answers