将 jQuery datepicker 应用于多个实例答案

【问题标题】：Apply jQuery datepicker to multiple instances将 jQuery datepicker 应用于多个实例
【发布时间】：2010-10-16 23:53:03
【问题描述】：

我有一个 jQuery 日期选择器控件，它适用于一次实例，但我不确定如何让它适用于多个实例。

<script type="text/javascript">
    $(function() {
        $('#my_date').datepicker();
    });
</script>

<% Using Html.BeginForm()%>
<% For Each item In Model.MyRecords%>
<%=Html.TextBox("my_date")%> <br/>
<% Next%>
<% End Using%>

如果没有 For Each 循环，它可以正常工作，但如果“MyRecords”集合中有多个项目，则只有第一个文本框有一个日期选择器（这是有道理的，因为它与 ID 相关联）。我尝试为文本框分配一个类并指定：

$('.my_class').datepicker();

但是虽然到处都显示日期选择器，但它们都会更新第一个文本框。

什么是使这项工作的正确方法？

【问题讨论】：

的东西是什么语言？
这是 ASP.NET 页面中的 VB - 只是说明问题要点的一种快速方法。
确保输入字段不是disabled，日期选择器不会显示disabled属性的输入字段

标签： javascript jquery jquery-ui

【解决方案1】：

html:

<input type="text" class="datepick" id="date_1" />
<input type="text" class="datepick" id="date_2" />
<input type="text" class="datepick" id="date_3" />

脚本：

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

（为了更简单，伪编码了一点）

【讨论】：

看起来我的问题的核心是文本框都有相同的 ID，所以每个日期选择器都在更新第一个文本框。你的例子并没有受到影响，所以它有效。如何让 ID 在循环中有所不同？
呃，不要让文本框有相同的 ID。有时你必须暂时远离一个问题，才能找到明显的答案。
一旦输入字段上有不同的 ID，$(".datepick").datepicker(); 就不能工作了吗？
我在输入上没有 ID，但有相同的类。在 Chrome 和 FF 上工作正常，但在 IE 上不行。要修复，我只需获取输入 ID
我已经使用 CSS 类名和 onSelect 事件处理程序将 datepicker 附加到一些 HTML 文本框我需要知道当前 onSelect 发生的选择器类名.. 元素应用了 2 个其他类除了我用来附加日期选择器的那个

【解决方案2】：

我也遇到了同样的问题。

使用日期选择的正确方法是$('.my_class').datepicker();，但您需要确保不要将相同的 ID 分配给多个日期选择器。

【讨论】：

【解决方案3】：

显而易见的答案是生成不同的 id，每个文本框都有一个单独的 id，类似于

[int i=0]
<% Using Html.BeginForm()%>
<% For Each item In Model.MyRecords%>
[i++]
<%=Html.TextBox("my_date[i]")%> <br/>
<% Next%>
<% End Using%>

我不了解 ASP.net，所以我只是在方括号内添加了一些通用的类似 C 的语法代码。将其转换为实际的 ASP.net 代码应该不成问题。

然后，你必须找到一种方法来生成尽可能多的

$('#my_date[i]').datepicker();

作为Model.MyRecords 中的项目。同样，方括号内是您的计数器，因此您的 jQuery 函数将类似于：

<script type="text/javascript">
    $(function() {
        $('#my_date1').datepicker();
        $('#my_date2').datepicker();
        $('#my_date3').datepicker();
        ...
    });
</script>

【讨论】：

【解决方案4】：

<html>
<head>
 <!-- jQuery JS Includes -->
 <script type="text/javascript" src="jquery/jquery-1.3.2.js"></script>
 <script type="text/javascript" src="jquery/ui/ui.core.js"></script>
 <script type="text/javascript" src="jquery/ui/ui.datepicker.js"></script>

 <!-- jQuery CSS Includes -->
 <link type="text/css" href="jquery/themes/base/ui.core.css" rel="stylesheet" />
 <link type="text/css" href="jquery/themes/base/ui.datepicker.css" rel="stylesheet" />
 <link type="text/css" href="jquery/themes/base/ui.theme.css" rel="stylesheet" />

 <!-- Setup Datepicker -->
 <script type="text/javascript"><!--
  $(function() {
   $('input').filter('.datepicker').datepicker({
    changeMonth: true,
    changeYear: true,
    showOn: 'button',
    buttonImage: 'jquery/images/calendar.gif',
    buttonImageOnly: true
   });
  });
 --></script>
</head>
<body>

 <!-- Each input field needs a unique id, but all need to be datepicker -->
 <p>Date 1: <input id="one" class="datepicker" type="text" readonly="true"></p>
 <p>Date 2: <input id="two" class="datepicker" type="text" readonly="true"></p>
 <p>Date 3: <input id="three" class="datepicker" type="text" readonly="true"></p>

</body>
</html>

【讨论】：

【解决方案5】：

有一个简单的解决方案。

<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>      
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"> </script> 
        <script type="text/javascript" src="../js/jquery.min.js"></script>
        <script type="text/javascript" src="../js/flexcroll.js"></script>
        <script type="text/javascript" src="../js/jquery-ui-1.8.18.custom.min.js"></script>
        <script type="text/javascript" src="../js/JScript.js"></script>
        <title>calendar</title>    
        <script type="text/javascript"> 
            $(function(){$('.dateTxt').datepicker(); }); 
        </script> 
    </head>
    <body>
        <p>Date 1: <input id="one" class="dateTxt" type="text" ></p>
        <p>Date 2: <input id="two" class="dateTxt" type="text" ></p>
        <p>Date 3: <input id="three" class="dateTxt" type="text" ></p>
    </body>
</html>

【讨论】：

【解决方案6】：

在运行时添加 datepicker 生成的输入文本框时，您必须检查它是否已经包含 datepicker，然后首先删除类 hasDatepicker，然后对其应用 datePicker。

function convertTxtToDate() {
        $('.dateTxt').each(function () {
            if ($(this).hasClass('hasDatepicker')) {
                $(this).removeClass('hasDatepicker');
            } 
             $(this).datepicker();
        });
    }

【讨论】：

【解决方案7】：

对 SeanJA 答案的一点说明。

有趣的是，如果你同时使用 KnockoutJS 和 jQuery 以下输入具有不同的 ID，但具有相同的可观察数据绑定：

<data-bind="value: first_dt" id="date_1" class="datepick" />
<data-bind="value: first_dt" id="date_2" class="datepick" />

将一个（相同的）日期选择器绑定到两个输入（即使它们具有不同的 id 或名称）。

在 ViewModel 中使用单独的 observables 将单独的日期选择器绑定到每个输入：

<data-bind="value: first_dt" id="date_1" class="datepick" />
<data-bind="value: second_dt" id="date_2" class="datepick" />

初始化：

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

【讨论】：

你不应该以这种方式与 KnockoutJS 结合使用。如果你使用 bindingHandler 绑定你的日期选择器，它会更好更干净。

【解决方案8】：

这里的解决方案是使用不同的 ID，正如你们中的许多人所说的那样。问题仍然存在于日期选择器中。请纠正我，但日期选择器没有一个包装器 ID -“ui-datepicker-div”。这可以在主题中的http://jqueryui.com/demos/datepicker/#option-showOptions 上看到。

是否有可以将此 ID 更改为类的选项？我不想仅仅为了这个明显的修复就分叉这个脚本！！

【讨论】：

这可能只是示例代码的“示例”部分。我认为它实际上不会生成具有该 ID 的 div。确保我的每个目标对象都有唯一的 ID，这样一切都按预期工作。

【解决方案9】：

改变使用类而不是 ID

<script type="text/javascript"> 
    $(function() { 
        $('.my_date1').datepicker(); 
        $('.my_date2').datepicker(); 
        $('.my_date3').datepicker(); 
        ... 
    }); 
</script>

【讨论】：

当然我们不想要替代方法......虽然我承认虽然这可行，但我不会使用它。尤其是在看到公认的答案之后——但每个人都有自己的答案。

【解决方案10】：

我遇到了同样的问题，但最后发现这是我从 ASP Web 用户控件调用脚本的方式的问题。我使用的是ClientScript.RegisterStartupScript()，但忘记给脚本一个唯一的键（第二个参数）。由于两个脚本被分配了相同的键，实际上只有第一个框被转换为日期选择器。所以我决定将文本框的 ID 附加到键中以使其唯一：

Page.ClientScript.RegisterStartupScript(this.GetType(), "DPSetup" + DPTextbox.ClientID, dpScript);

【讨论】：

【解决方案11】：

我在动态添加日期选择器类时遇到了类似的问题。我找到的解决方案是注释掉 datepicker.js 的第 46 行

// this.element.on('click', $.proxy(this.show, this));

【讨论】：

【解决方案12】：

在我的例子中，我没有给我的<input> 元素提供任何 ID，而是使用一个类来应用日期选择器，就像 SeanJA 的答案一样，但日期选择器只应用于第一个。我发现 JQuery 会自动添加一个 ID，并且它在所有元素中都是相同的，这解释了为什么只有第一个被选中。

【讨论】：