multiple datepicker in same page not working javascript

jquery html jquery-ui datepicker jquery-ui-datepicker

27,229

Solution 1

Take a look in below example:

<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();
});

Complete 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>

Solution 2

<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" />

27,229

Author by

marsweb

Updated on July 09, 2022

Comments

marsweb almost 2 years
I used add row delete row functionality in my form. I have a date field with date picker functionality. The problem is if i add more than one row and then click date picker it is not working properly. Please see this http://jsfiddle.net/KN7Hd/ for demo.
```
 $(function() {
    $( "#datepicker" ).datepicker({
      showOn: "button",
      buttonImage: "images/calendar.png",
      buttonImageOnly: true,
      showOtherMonths: true,
      selectOtherMonths: true
    });
  });
```
How to fix this?
Firzen over 7 years

Unique IDs works also with Wicket jQuery UI, thanks!
Mohammad H. over 5 years

This is a great solution and works fine for me thank you
Yousef Altaf about 4 years

This worked for me too. and it's better than using the id as in some cases as I had the datepickers are dynamic and it's better to use class.