我有一个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();
但是虽然这样会在所有地方显示日期选择器，但它们都会更新第一个文本框。
如何正确使其工作？
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();
});
(为了简化，伪代码略作修改)
$(".datepick").datepicker(); 还能正常工作吗？ - rapcalonSelect事件处理程序将日期选择器附加到一些HTML文本框上，我需要知道当前onSelect发生的选择器类名。这些元素还应用了另外2个类，除了我用来附加日期选择器的那个类。 - techie_28我遇到了同样的问题。
正确使用日期选择器是$('.my_class').datepicker();，但您需要确保不将相同的ID分配给多个日期选择器。
[int i=0]
<% Using Html.BeginForm()%>
<% For Each item In Model.MyRecords%>
[i++]
<%=Html.TextBox("my_date[i]")%> <br/>
<% Next%>
<% End Using%>
$('#my_date[i]').datepicker();
作为你的Model.MyRecords中的项目。再次强调，方括号内是你的计数器，所以你的jQuery函数应该是这样的：
<script type="text/javascript">
$(function() {
$('#my_date1').datepicker();
$('#my_date2').datepicker();
$('#my_date3').datepicker();
...
});
</script>
<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>
<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>
function convertTxtToDate() {
$('.dateTxt').each(function () {
if ($(this).hasClass('hasDatepicker')) {
$(this).removeClass('hasDatepicker');
}
$(this).datepicker();
});
}
针对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中使用单独的可观察对象，为每个输入框绑定单独的日期选择器：
<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();
});
使用类替代ID进行更改
<script type="text/javascript">
$(function() {
$('.my_date1').datepicker();
$('.my_date2').datepicker();
$('.my_date3').datepicker();
...
});
</script>
我曾经遇到过动态添加日期选择器类的类似问题。我找到的解决方案是注释掉datepicker.js文件中的第46行。
// this.element.on('click', $.proxy(this.show, this));
ClientScript.RegisterStartupScript()，但忘记给脚本一个唯一的键（第二个参数）。由于两个脚本都被分配了相同的键，只有第一个文本框实际上被转换为日期选择器。因此，我决定将文本框的 ID 追加到键上，使其变得唯一：Page.ClientScript.RegisterStartupScript(this.GetType(), "DPSetup" + DPTextbox.ClientID, dpScript);