jQuery Datepicker for multiple inputs

问题

I have a jQuery datepicker script:

$(function() {
    $( "#datepicker" ).datepicker({ dateFormat: "yyyy-mm-dd" });
}); 

When I want to initialize this script for two inputs, it works only for the first one. How to use it for both inputs?

<input type="text" name="MyDate1" id="datepicker">
<input type="text" name="MyDate2" id="datepicker">

回答1:

Just change all id to class.

<input type="text" name="MyDate1" class="datepicker">
<input type="text" name="MyDate2" class="datepicker">

$(function() {
  $( ".datepicker" ).datepicker({ dateFormat: "yyyy-mm-dd" });
}); 

also can use

$(function() {
  $( "input[name^=MyDate]" ).datepicker({ dateFormat: "yyyy-mm-dd" });
});

回答2:

Tired of repeating this, but still, am repeating it once more. ids have to be unique. So, use this:

<input type="text" name="MyDate1" class="datepicker">
<input type="text" name="MyDate2" class="datepicker">

with

$(function() {
    $( ".datepicker" ).datepicker({ dateFormat: "yyyy-mm-dd" });
});

回答3:

It isn't valid to have duplicated IDs. You should add a class instead:

<input type="text" name="MyDate1" class="datepicker" id="datepicker1">
<input type="text" name="MyDate2" class="datepicker" id="datepicker2">

Then you can do:

$(function() {
    $( ".datepicker" ).datepicker({ dateFormat: "yyyy-mm-dd" });
}); 

回答4:

Access datepicker function by Name:

$(function() {
    $('[name="MyDate1"]').datepicker({ dateFormat: "yyyy-mm-dd" });
}); 

回答5:

You could also add classes on the fly if input fields are dynamically generated, such as in Django templates.

<input type="text" name="MyDate1" id="datepicker1">
<input type="text" name="MyDate2" id="datepicker2">

Get input fields using #id and add a class

$(function() {
    $( "#datepicker1, #datepicker2" ).addClass('datepicker');
    $( ".datepicker" ).datepicker({ dateFormat: "yy-mm-dd" });
});

回答6:

<input type="text" name="MyDate1" id="datepicker1">
<input type="text" name="MyDate2" id="datepicker2">

Just get input fields using #id and apply datepicker.

$(function() {
    $( "#datepicker1, #datepicker2" ).datepicker({ dateFormat: "yy-mm-dd" });
});

回答7:

Access date picker by id

<input type="text" name="MyDate1" id="datepicker1">
<input type="text" name="MyDate2" id="datepicker2">

$(function() {
  $( "input[id^=datepicker]" ).datepicker({ dateFormat: "dd-mm-yy" });
});

OR access date picker by name:

<input type="text" name="MyDate1" id="datepicker1">
<input type="text" name="MyDate2" id="datepicker2">

$(function() {
   $( "input[name^=MyDate]" ).datepicker({ dateFormat: "dd-mm-yy" });
});

回答8:

  <script>
  $(document).ready(function() {
    $("#datepicker").datepicker();
  });
  $(document).ready(function() {
    $("#datepicker2").datepicker();
  });
  $(document).ready(function() {
    $("#datepicker3").datepicker();
  });
  </script>

And just give the forms the id's: datepicker datepicker2 datepicker3

来源：https://stackoverflow.com/questions/10803518/jquery-datepicker-for-multiple-inputs