对多个实例应用 jQuery 数据采集器

我有一个 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();

但是，虽然这显示了一个日期选择器无处不在，他们都更新了第一个文本框。

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

135596 次浏览
小开

显而易见的答案是生成不同的 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();

同样，方括号内是计数器，所以 jQuery 函数应该是这样的:

<script type="text/javascript">
$(function() {
$('#my_date1').datepicker();
$('#my_date2').datepicker();
$('#my_date3').datepicker();
...
});
</script>
小开
最佳答案

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 吗这可以在 http://jqueryui.com/demos/datepicker/#option-showOptions的主题中看到。

是否有可以将此 ID 更改为类的选项？我不想只为了这一个明显的修复程序而使用这个脚本! ！

小开 
<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>
小开

更改 class 而不是 ID 的使用

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

我也有同样的问题。

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

小开

我也遇到了同样的问题，但是最终发现这是我从一个 ASP web 用户控件调用脚本的方式的问题。我正在使用 ClientScript.RegisterStartupScript()，但是忘记给脚本一个唯一的键(第二个参数)。由于两个脚本被分配了相同的密钥，只有第一个框实际上被转换成了一个数据采集器。因此，我决定将文本框的 ID 附加到键上，以使其惟一:

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

我在动态添加数据采集器类时遇到过类似的问题。我找到的解决方案是注释掉 datepicker.js 的第46行

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

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

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

有一个简单的解决办法。

<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>
小开

给 Sean JA 答案的一个小提示。

有趣的是，如果将 < strong > KnockoutJS 和 jQuery 一起使用 以下输入为 用不同的身份证，但使用 相同的数据绑定可观察:

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

将一个(相同的)数据采集器绑定到两个输入(即使它们有不同的 id 或名称)。

使用 视图模型中独立的观察对象将一个单独的数据采集器绑定到每个输入:

<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();
});
小开

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


提交答案