installing and using a Date Picker for hotels

webdeveloper123 · August 23, 2023

Hi Guys,

I'm not too hot on JS and stuff like Node.Js and npm so I am here to ask for help. I am a basic JS programmer and I am not sure if I am doing the following right:

I found a Date picker library online (https://github.com/benitolopez/hotel-datepicker) and want to use it.

It says I can install as a module or as a script, so I chose script because I have never used npm, it's not even installed on my server.

So I downloaded Fecha and the Date picker library, and extracted the following files:

hotel-datepicker.css

fecha.js

hotel-datepicker.min.js

and have the following code:

<link href="css/hotel-datepicker.css" rel="stylesheet">
<script src="js/fecha.js"></script>
<script src="js/hotel-datepicker.min.js"></script>

All the directory paths are correct. The above is in the <head> section

Then I have this: (which is also in the <head> section

    <script>
var hdpkr = new HotelDatepicker(document.getElementById("input-id"), options);


    </script>

with this HTML:

<input type="text" id="input-id" name="datepicker">

But it's not working. I'm obviously doing something wrong but not sure what it is.

Thanks

requinix · August 23, 2023

1. In order for Javascript to find the #input-id element, it needs to exist in the browser's DOM - that's the internal model that the browser uses to manage the page.
2. When you put things into the <head>, they happen immediately as the browser is loading the HTML markup it's receiving from the server.
3. Your datepicker input is somewhere down on the page.

Putting those together means that DOM stuff in the <head>, such as using getElementById, is not going to work in 99% of cases. You're simply trying to do things too early and they're not available yet.

The right way of doing this is to wait until the DOM is ready. Exactly how depends on what/whether you're using Javascript libraries, as most tend to give you an easy way to hook into that without worrying about the details; the classic example is jQuery's $(function) syntax.

But for a simple, non-library method, it's generally sufficient to put your DOM <script> stuff at the bottom of the page. Browsers build up the DOM as they go, so putting your scripting at the bottom of the page generally means that the rest of it is ready to use.

<html>
  <head>
    <!-- these resources will be loaded immediately when the browser reads the page -->
    <link href="css/hotel-datepicker.css" rel="stylesheet">
    <script src="js/fecha.js"></script>
    <script src="js/hotel-datepicker.min.js"></script>
  </head>
  
  <body>
    <script>
      // #input-id does not exist yet...
    </script>
    
    ...
    <input type="text" id="input-id" name="datepicker">
    ...
    
    <script>
      // now it does
      var hdpkr = new HotelDatepicker(document.getElementById("input-id"), options);
    </script>
  </body>
</html>

webdeveloper123 · August 25, 2023

Hey requinix,

Thanks for the reply. I tried that but I still can't get the date picker to popup when I click on the text field. There is a discrepancy between the github page and the official home page of the plugin (http://lopezb.com/hoteldatepicker/) where by it states different code to get the popup up and running. I went with the github version (but I tried both) because in the readme file of the zip file for the plugin the instructions are the same as the github page.

I have tried 4 or 5 different things including:

var input = document.getElementById('input-id');
var datepicker = new HotelDatepicker(input);

and:

var hdpkr = new HotelDatepicker(document.getElementById("input-id"), options);

and:

var hdpkr = new HotelDatepicker(document.getElementById("input-id"));

and:

var input = document.getElementById('input-id');
var datepicker = new HotelDatepicker(input, {
    format: 'DD-MM-YYYY'
});

and:


var hdpkr = new HotelDatepicker(document.getElementById("input-id"), {
    format: 'DD-MM-YYYY'
});

Although i'm not sure if the above is valid code (but it doesn't give me an error)

Can you help please?

Thanks

Edited August 25, 2023 by webdeveloper123

Sign In

installing and using a Date Picker for hotels

Recommended Posts

webdeveloper123

Link to comment

Share on other sites

requinix

Link to comment

Share on other sites

webdeveloper123

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information