Geek Answers Handbook

Datepicker icon does not appear next to input text box

As you can see in the following JS script, I can only get a small Datepicker icon next to one of the input fields. I need him to appear next to both.

However, changing the "id" to "class" does not work, and as a result both icons disappear.

http://jsfiddle.net/Vzt39/

HTML: <title>jQuery UI Datepicker - Icon trigger</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <script> $(function() { $( "#datepicker" ).datepicker({ showOn: "button", buttonImage: "calendar.gif", buttonImageOnly: true }); }); </script> <p>Date: <input type="text" id="datepicker" /></p> <p>Date: <input type="text" id="datepicker" /></p> CSS: <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> <link rel="stylesheet" href="/resources/demos/style.css" />
+4
source share
2 answers
  <script> $(function() { $( "#datepicker" ).datepicker({ showOn: "button", buttonImage: "calendar.gif", buttonImageOnly: true }); $( "#datepicker2" ).datepicker({ showOn: "button", buttonImage: "calendar.gif", buttonImageOnly: true }); }); </script>
0
source

You must change the id to class and change $("#datepicker") to $(".datepicker") , as the identifiers must be unique / different.

Then wrap the jQuery code in $(document).ready(function(){ /*...*/ }); to make sure that the html elements are created in the DOM when javascript / jQuery code is executed.

The result will look like this:

 <script> $(document).ready(function() { $( ".datepicker" ).datepicker({ showOn: "button", buttonImage: "calendar.gif", buttonImageOnly: true }); }); </script> <p>Date: <input type="text" class="datepicker" /></p> <p>Date: <input type="text" class="datepicker" /></p>

Here is a working fiddle: http://jsfiddle.net/GJHuf/1/

+6
source

More articles:


All Articles