将 jQuery datepicker 应用于多个实例
Posted
技术标签:
【中文标题】将 jQuery datepicker 应用于多个实例【英文标题】：Apply jQuery datepicker to multiple instances 【发布时间】：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属性的输入字段
【参考方案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，并且它在所有元素中都是相同的，这解释了为什么只有第一个被选中。
【讨论】：
以上是关于将 jQuery datepicker 应用于多个实例的主要内容，如果未能解决你的问题，请参考以下文章
JQuery datepicker 默认日期和多个 datepicker
带有 jquery datepicker 的 Ruby on rails
jQuery ui datepicker 与 bootstrap datepicker 冲突
jQuery Datepicker，选择多个日期并在选择时通过css标记它们，永久