用于多个输入的 jQuery Datepicker答案

【问题标题】：jQuery Datepicker for multiple inputs用于多个输入的 jQuery Datepicker
【发布时间】：2012-06-03 22:25:50
【问题描述】：

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

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

当我想为两个输入初始化这个脚本时，它只适用于第一个。如何将它用于两个输入？

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

【问题讨论】：

对所有需要日期选择器的输入都有一个类
$('.your-class').datepicker({ dateFormat: "yyyy-mm-dd" });
首先，你不能有多个 id

标签： javascript jquery jquery-ui datepicker jquery-ui-datepicker

【解决方案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" });
});

【讨论】：

我通读了几个关于这个问题的线程，这些线程提出了实现这一目标的超级复杂方法——你的方法花了我大约 0.5 秒的时间，而且效果很好。谢谢！
dateFormat: "yyyy-mm-dd" 将显示：YYYYYYYY-MM-DD 删除多余的 yy 以显示正确的格式。更新至：dateFormat: "yy-mm-dd"
一个 id 只能在一个页面上使用一次，显然 jQuery 遵循该规范。
它帮助了我！ THX

【解决方案2】：

厌倦了重复这个，但我仍然重复一遍。 ids 必须是唯一的。所以，使用这个：

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

与

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

【讨论】：

【解决方案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" });
});

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案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" });
});

【讨论】：

【解决方案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" });
});

【讨论】：

【解决方案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" });
});

【讨论】：

【解决方案8】：

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

只需给表单提供 id 的：日期选择器日期选择器2 日期选择器3

【讨论】：