jQuery多输入日期选择器

Question

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

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

我想要为两个输入初始化这个脚本，但它只适用于第一个。如何同时使用它来处理两个输入？

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

- Gusgus

---

为所有需要日期选择器的输入添加一个类。 - Dhiraj

$('.your-class').datepicker({ dateFormat: "yyyy-mm-dd" }); - Dhiraj

首先，您不能拥有多个ID。 - Joseph

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" });
});

- thecodeparadox

---

我阅读了几篇关于此的帖子，建议采用超级复杂的方法来实现这个目标 - 你提出的方法只花了我大约0.5秒，并且非常有效。谢谢！ - Brian Powell

dateFormat: "yyyy-mm-dd"将显示为YYYYYYYY-MM-DD，删除额外的 yy以显示正确格式。更新为：dateFormat: "yy-mm-dd"。 - Staccato

一个id在页面上只能使用一次，显然jQuery遵循这个规范。 - AndrewRMillar

它帮助了我！谢谢。 - andrefilipeos

Answer 2

重复提醒，但还是再说一遍。id必须是唯一的。因此，请使用以下内容：

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

使用

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

- Parth Thakkar

Answer 3

重复的ID是无效的。您应该添加一个类(class)：

<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" });
}); 

- Ethan Brown

Answer 4

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

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

- Ankit

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" });
});

- Staccato

Answer 6

我编写了这样的代码，在多个字段表单中正常工作：

在循环之前添加此代码：

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

而這一行程式碼是在迴圈內的：

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

- Rudi Muryanta

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" });
});

- Ashique Ansari

Answer 8

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

只需使用 #id 获取输入字段并应用日期选择器。

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

- Sudip Sur

Answer 9

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

只需为表单分配ID： datepicker datepicker2 datepicker3

- Derrik de Moei