3

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

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

现在，我在 ExpertsExchange 上的一篇文章中看到，一旦您初始化了一个 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
})

谢谢你的帮助！

维策

4

4 回答 4

3

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

如果您使用：

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

这行不通。

会发生亚历克斯P所说的。

要解决您需要使用 id 的问题。没有其他办法。

你用什么id都没关系。您可以使用随机生成的唯一 ID。下面是一个例子：

$('.someclass').each(function() {
   $('#' + $(this).attr('id')).datepicker();
});
于 2013-06-07T21:49:28.893 回答
2

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

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

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

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

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

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

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

于 2010-11-25T13:23:36.083 回答
1

jQuery UI Datepicker 小部件引用您附加到的 html 属性的 id。因此，要使用多个日期选择器，您需要确保每个日期选择器的 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

于 2011-07-25T09:50:39.473 回答
0

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

$('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
    })
})
于 2010-11-25T10:27:58.467 回答