Question

我有一个jQuery datepicker脚本：

         $(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

按名称访问datepicker函数：

$(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获取输入字段并应用datepicker。

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

Answer 7

通过ID访问日期选择器

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

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

按名称或访问日期选择器：

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

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

Answer 8

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

只需将表单赋予id：日期选择器 DATEPICKER2 datepicker3

多个输入的jQuery Datepicker

8 个答案: