jQuery 用于多个输入的日期选择器

Question

我有一个 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

通过 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

我编写了这样的代码并在多个字段形式中正常工作：

Add this code before loop:

    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css"/>
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
    <script>
    $('.mydatepicker').each(function(){
       $(this).datepicker();
    });
    </script>

And this line is in loop:

    <div class="control-group form-group" style="padding: 5px;">
      <div class="controls">
        <span class="bi bi-calendar2-minus" style="color: #FF6600;"></span> Input Date
        <input name="myDate$i" type="text" class="form-control mydatepicker" id="myDate$i" required ="true" placeholder="Contoh: 2022-11-25" data-bs-toggle="tooltip" style="border-radius: 3px; padding:10px;"/>
      </div>      
    </div>

Answer 9

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

只需为表单提供 id： datepicker datepicker2 datepicker3