一页上不同日期选择器的 jQuery 问题

Question

我正在构建一个计划器，它将在几个不同的地方使用日期选择器功能。有一个控制日历的通用日期选择器，然后在不同的对话框中我想要一个用于打开日期选择器的按钮，仅用于选择字段的日期（例如事件的开始日期）。

一般日期选择器与 div 绑定（即，它是内联日期选择器），而其他日期选择器与输入绑定。我将一个日期选择器绑定到 div 上有一个很好的理由：我需要能够使用可拖放和可放置的方式将项目拖到其上，而使用“弹出”日期选择器是不可能的。

现在，我在 帖子 上看到在 ExpertsExchange 中，一旦初始化了一个日期选择器实例，其选项将自动应用于任何其他实例，除非您为后面的实例指定它们。但就我而言，似乎一切都变得混乱：为一个项目指定的事件将在另一个项目上触发，内联日期选择器将在我关闭弹出日期选择器后出现，等等。

我还没有包含真正的代码，因为有很多代码，我首先想知道我是否缺少一个一般原则，例如“日期选择器不允许一个选项对于不同的实例具有不同的值，因为......”或“不要混合内联和弹出日期选择器，因为...... .”或者类似的东西。

但我在代码语言中的总体想法是：

$('div#mainDatePicker').datepicker({
  //options for main (inline) datepicker, doubling as defaults for any subsequent datepickers
})

$('input#selectStartDate').datepicker({
  //specific options for this datepicker, where different from the main one
})

感谢您的帮助！

维茨

Answer 1

如果您使用 $('.someclass).datepicker(); 和 $('.anotherclass).datepicker() 它将起作用。

如果你使用：

$('.someclass').each(function() {
   $(this).datepicker();
});

这将不起作用。

Alex P 所说的将会发生。

要解决这个问题，你需要使用 id。
没有其他办法。

你使用什么 id 并不重要。您可以使用随机生成的唯一 ID。
下面是一个例子：

$('.someclass').each(function() {
   $('#' + $(this).attr('id')).datepicker();
});

Answer 2

我在同一页面上使用多个日期选择器做了一些工作，并得到了意想不到的结果，直到我意识到每个日期选择器都需要有一个唯一的 ID。

例如，假设您想要将日期选择器绑定到两个相似的输入按钮。以下情况会导致问题：

<input type="text" class="myCustomDatePicker">
<input type="text" class="myCustomDatePicker">

例如，如果您使用第二个 DatePicker 设置日期，则所选日期将出现在第一个输入框的输入字段中。

相反，设置 id 将确保每个日期选择器独立运行：

<input type="text" class="myCustomDatePicker" id="dp1">
<input type="text" class="myCustomDatePicker" id="dp2">

不知道这是否有帮助，但只是需要检查一下我猜在同一页面上使用多个日期选择器时

Answer 3

jQuery UI Datepicker 小部件引用了
您将其附加到的 html 属性。因此要使用多个日期选择器
你需要确保每个日期选择器的 id 是不同的。

So you want to end up with the following HTML:

<input id="form-date-1" type="text" />
<input id="form-date-2" type="text" />
<script type="text/javascript">
  $("#form-date-1").datepicker();
  $("#form-date-2").datepicker();
</script>

检查这篇文章： http://mike-abner .posterous.com/multiple-jquery-ui-datepickers-on-the-same-pa

Answer 4

我曾经遇到过这个问题（日期格式）。也许你可以在点击时绑定它，如下所示：

$('div#mainDatePicker').click(function(){
    $(this).datepicker({
        //options for main (inline) datepicker, doubling as defaults for any subsequent datepickers
    })
})

$('input#selectStartDate').click(function(){
    $(this).datepicker({
        //specific options for this datepicker, where different from the main one datepickers
    })
})