CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-datepicker
p3ac3
p3ac3

Reputation: 161

How to use datepicker Dynamically

i have this input boxes, now how can i use datepicker dynamically

<input type="text" id="datepicker" name="date[0]">
<input type="text" id="datepicker" name="date[1]">
<input type="text" id="datepicker" name="date[2]">
<input type="text" id="datepicker" name="date[3]">

i tried to code it something like this but this wont work only the first input changes

$('name^="date"').datepicker({
    dateFormat: 'yy-mm-dd',
    changeMonth: true,
    changeYear: true
})

i want to code it dynamically not like this 

$('#datepicker1').datepicker({})
$('#datepicker2').datepicker({})....

is it possible? thanks for any reply.

Upvotes: 0

Views: 103

Answers (4)

websky
websky

Reputation: 3172

HTML:

<input type="text" class="your_input" name="your_input" />
<input type="text" class="your_input" name="your_input2" />

JS:

  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
  <script>
  $(function() {
    $( ".your_input" ).datepicker();
  });
  </script>

Optional Fast load datapicker:

      <script src="//code.jquery.com/jquery-1.10.2.js"></script>
      <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
      <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
      <script>
      $(function() {
        $('body').on('focus',".your_input", function(){
              $(this).datepicker({ dateFormat: 'dd-mm-yy' });
        });
      });
      </script>

Upvotes: 0

Abhishek
Abhishek

Reputation: 196

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.10.2.js"></script>      
    <script src="Scripts/jquery-ui-1.10.4.js"></script>
    <link href="Content/jquery-ui-1.10.4.css" rel="stylesheet" />
    <script type="text/javascript">
        $(function () {
            $('[name^="date"]').datepicker();
        });
    </script>

</head>
<body>
    <input type="text" id="datepicker1" name="date[0]" />
    <input type="text" id="datepicker2" name="date[1]" />
    <input type="text" id="datepicker3" name="date[2]" />
    <input type="text" id="datepicker4" name="date[3]" />
</body>
</html>

Upvotes: 0

Nishan Senevirathna
Nishan Senevirathna

Reputation: 719

You can use something like this.

$(document).ready(function() {

$('[name^="date"]').datepicker({
    dateFormat: 'yy-mm-dd',
    changeMonth: true,
    changeYear: true
});
});

Upvotes: 0

RedShadow
RedShadow

Reputation: 121

for this case you should use a class instead of a ID:

<input type="text" class="datepicker" name="date[0]">
<input type="text" class="datepicker" name="date[1]">
<input type="text" class="datepicker" name="date[2]">
<input type="text" class="datepicker" name="date[3]">

Then you can simply call the datepicker for every element with this class:

$('.datepicker').datepicker({
    dateFormat: 'yy-mm-dd',
    changeMonth: true,
    changeYear: true
})

Upvotes: 2

Related Questions