jQuery的日期选择器为多个输入(jQuery Datepicker for multiple i

我有一个jQuery的日期选择器脚本：

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

当我想初始化此脚本两个输入，它仅适用于第一个。 如何使用它的两个输入？

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

Answer 1:

只要改变所有的id ，以class 。

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

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

也可以使用

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

Answer 2:

厌倦了重复这一点，不过，我再一次重复它。 id ■找是唯一的。 所以，使用此：

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

同

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

Answer 3:

它是无效的有重复的ID。 你应该添加一个类来代替：

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

然后，你可以这样做：

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

Answer 4:

通过名称访问日期选择器功能：

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

Answer 5:

你也可以在飞行中添加类，如果输入字段是动态生成的，比如在Django模板。

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

使用#ID获取输入字段和添加一个类

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

Answer 6:

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

只是用#ID获得输入字段和适用日期选择器。

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

Answer 7:

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

而只是给表单的id：日期选择DATEPICKER2 datepicker3

文章来源: jQuery Datepicker for multiple inputs