Geek Answers Handbook

Date picker (.js) doesn't work in HTML editor, but works in fiddle

This is the working fiddle format and below is the code I used on my demo site. I created a new js folder name and placed datepicker.js inside it. so I linked the following in my html.

<script type="text/javascript" src="js/datepicker.js"></script>

and my datapicker.js code

 $(function () { $('#departure-date').datepicker({ numberOfMonths: 2, showAnim: "fold", showButtonPanel: true, onSelect: (function (date) { setTimeout(function () { $('#return-date').datepicker('show'); }, 300) $(this).val($(this).datepicker('getDate').toLocaleDateString()); }) }); $('#return-date').datepicker({ numberOfMonths: 2, showAnim: "fold", showButtonPanel: true, onSelect: (function (date) { $(this).val($(this).datepicker('getDate').toLocaleDateString()); }) }); });

and my html code

 <input id="departure-date" type="text" placeholder="Depart Date" > <input type="text" id="return-date" placeholder="return Date">

but when i click the above .js button is not called. please, help

+8
javascript jquery html css
source share
3 answers

You need to enable jQuery version. Download the latest version and put it in the js folder and bind it the same way you did for datepicker.js, or directly enable it like this.

 <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

If this does not work, try

 <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

I'm not sure if your only datepicker.js has an error, but if it tries to try jquery-ui js, which includes it.

I tested it with the inclusion of the above 2 js sources, and it worked fine.

If the direct link to the js jquery site is not working, this is another problem on your page that we are not shown.

+3
source share

Your code runs flawlessly on my local machine. Where I just used the jQuery and jQueryUI CDN path from

Google Developer Site Link

Your piece of code:

 <!DOCTYPE html> <html> <head> <title>JS Datepicker</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> </head> <body> <input id="departure-date" type="text" placeholder="Depart Date" > <input type="text" id="return-date" placeholder="return Date"> <script type="text/javascript"> $(function () { $('#departure-date').datepicker({ numberOfMonths: 2, showAnim: "fold", showButtonPanel: true, onSelect: (function (date) { setTimeout(function () { $('#return-date').datepicker('show'); }, 300) $(this).val($(this).datepicker('getDate').toLocaleDateString()); }) }); $('#return-date').datepicker({ numberOfMonths: 2, showAnim: "fold", showButtonPanel: true, onSelect: (function (date) { $(this).val($(this).datepicker('getDate').toLocaleDateString()); }) }); }); </script> </body> </html>

departure date return date

+2
source share

If you skip the jQuery place, it will not work. hope the code below helps you.

 $(function () { $('#departure-date').datepicker({ numberOfMonths: 2, showAnim: "fold", showButtonPanel: true, onSelect: (function (date) { setTimeout(function () { $('#return-date').datepicker('show'); }, 300) $(this).val($(this).datepicker('getDate').toLocaleDateString()); }) }); $('#return-date').datepicker({ numberOfMonths: 2, showAnim: "fold", showButtonPanel: true, onSelect: (function (date) { $(this).val($(this).datepicker('getDate').toLocaleDateString()); }) }); }); 
  <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"> <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script> <link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"> <input id="departure-date" type="text" placeholder="Depart Date" > <input type="text" id="return-date" placeholder="return Date">
+1
source share

More articles:


All Articles