Geek Answers Handbook

Multiple datepicker on one page javascript not working

I used the function to add a row string in my form. I have a date field with date picker functionality. The problem is that if I add multiple rows and then select the date picker, it does not work properly. Please see http://jsfiddle.net/KN7Hd/ for a demo.

  $(function() { $( "#datepicker" ).datepicker({ showOn: "button", buttonImage: "images/calendar.png", buttonImageOnly: true, showOtherMonths: true, selectOtherMonths: true }); });

How to fix it?

+6
source share
2 answers

Take a look below:

http://jsfiddle.net/fMD62/

 <input type="text" class="datepick" id="date_1" /> <input type="text" class="datepick" id="date_2" /> <input type="text" class="datepick" id="date_3" />

Script:

  $('.datepick').each(function(){ $(this).datepicker(); });

Full code:

 <html> <head> <!-- jQuery JS Includes --> <script type="text/javascript" src="jquery/jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery/ui/ui.core.js"></script> <script type="text/javascript" src="jquery/ui/ui.datepicker.js"></script> <!-- jQuery CSS Includes --> <link type="text/css" href="jquery/themes/base/ui.core.css" rel="stylesheet" /> <link type="text/css" href="jquery/themes/base/ui.datepicker.css" rel="stylesheet" /> <link type="text/css" href="jquery/themes/base/ui.theme.css" rel="stylesheet" /> <!-- Setup Datepicker --> <script type="text/javascript"><!-- $(function() { $('input').filter('.datepicker').datepicker({ changeMonth: true, changeYear: true, showOn: 'button', buttonImage: 'jquery/images/calendar.gif', buttonImageOnly: true }); }); --></script> </head> <body> <!-- Each input field needs a unique id, but all need to be datepicker --> <p>Date 1: <input id="one" class="datepicker" type="text" readonly="true"></p> <p>Date 2: <input id="two" class="datepicker" type="text" readonly="true"></p> <p>Date 3: <input id="three" class="datepicker" type="text" readonly="true"></p> </body> </html>
+9
source 
 <script type="text/javascript"> $(document).on('focus', '.datepicker',function(){ $(this).datepicker({ todayHighlight:true, format:'yyyy-mm-dd', autoclose:true }) }); </script> <input type="text" class="datepicker" /> <input type="text" class="datepicker" /> <input type="text" class="datepicker" />
+1
source

More articles:


All Articles