webdeveloper123 Posted August 23, 2023 Share Posted 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 Quote Link to comment https://forums.phpfreaks.com/topic/317216-installing-and-using-a-date-picker-for-hotels/ Share on other sites More sharing options...
requinix Posted August 23, 2023 Share Posted 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> Quote Link to comment https://forums.phpfreaks.com/topic/317216-installing-and-using-a-date-picker-for-hotels/#findComment-1611369 Share on other sites More sharing options...
webdeveloper123 Posted August 25, 2023 Author Share Posted August 25, 2023 (edited) 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 Quote Link to comment https://forums.phpfreaks.com/topic/317216-installing-and-using-a-date-picker-for-hotels/#findComment-1611416 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.