Question

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

通用日期选择器与div相关联（即它是内联日期选择器），而其他则与输入相关联。有一个很好的理由为什么我将一个datepicker绑定到div：我需要能够使用draggable和droppable将项目拖到它上面，使用'popup'日期选择器证明这是不可能的。

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

我还没有包含真正的代码，因为它有很多，我首先想知道我是否缺少一般原则，例如“Datepicker不允许一个选项为不同的实例设置不同的值，因为...“或”不要混合内联和弹出日期选择器，因为......“或某些此类事情。

但我在codepeak中的一般想法是：

$('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
})

感谢您的帮助！

Wytze

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之前有意想不到的结果。

例如，假设您要将datepicker绑定到两个类似的输入按钮。以下将导致问题：

<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小部件引用了id的id 你附加的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
    })
})

jQuery在一个页面上使用不同的datepickers问题

4 个答案: