将jQuery datepicker应用于多个实例
我有一个jQuerydateselect器控件一次正常工作，但我不知道如何让它适用于多个实例。
<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”集合中有多个项目，那么只有第一个文本框会得到一个dateselect器（因为它与ID绑定在一起）。 我试着给文本框分配一个类并指定：
$('.my_class').datepicker();
但是尽pipe在每个地方都显示了dateselect器，但它们都会更新第一个文本框。
什么是正确的方式来做这个工作？
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(); });
（伪代码稍微保持简单）
我只是有同样的问题。
使用dateselect的正确方法是$('.my_class').datepicker(); 但是您需要确保您不要将相同的ID分配给多个dateselect器。
显而易见的答案是生成不同的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代码应该不成问题。
然后，你必须find一个方法来产生尽可能多的
$('#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: 'jqueryhttp://img.dovov.comcalendar.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>
有一个简单的解决scheme。
<html> <head> <script src="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>
当在运行时添加datepicker生成的input文本框，你必须检查它是否已经包含datepicker，然后首先删除类hasDatepicker然后将datePicker应用到它。
function convertTxtToDate() { $('.dateTxt').each(function () { if ($(this).hasClass('hasDatepicker')) { $(this).removeClass('hasDatepicker'); } $(this).datepicker(); }); }
对SeanJA答案的一点点注意。
有趣的是，如果您将KnockoutJS和jQuery一起使用具有不同ID的以下input，但使用相同的data-bind observable ：
<data-bind="value: first_dt" id="date_1" class="datepick" /> <data-bind="value: first_dt" id="date_2" class="datepick" />
将绑定一个（相同的）dateselect器到两个input（即使它们具有不同的ID或名称）。
在您的ViewModel中使用单独的可观察元素将单独的dateselect器绑定到每个input：
<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(); });
这里的解决scheme就像你们许多人所说的那样有不同的ID。 datepicker中的问题依然存在。 请纠正我，但不datepicker有一个包装ID – “用户名datepicker-div”。 这可以在http://jqueryui.com/demos/datepicker/#option-showOptions中看到。;
有没有一个选项可以改变这个ID是一个类？ 我不想为这个明显的修复而分配这个脚本！
改变类的使用而不是ID
<script type="text/javascript"> $(function() { $('.my_date1').datepicker(); $('.my_date2').datepicker(); $('.my_date3').datepicker(); ... }); </script>
我有同样的问题，但最终发现，这是一个问题，我从ASP Web用户控件调用脚本的方式。 我正在使用ClientScript.RegisterStartupScript() ，但忘了给脚本一个唯一的键（第二个参数）。 两个脚本被分配相同的密钥，只有第一个盒子实际上被转换成dateselect器。 所以我决定将文本框的ID附加到密钥上，以使其唯一：
Page.ClientScript.RegisterStartupScript(this.GetType(), "DPSetup" + DPTextbox.ClientID, dpScript);
我有一个类似的问题，dynamic添加datepicker类。 我find的解决scheme是注释掉datepicker.js的第46行
// this.element.on('click', $.proxy(this.show, this));
在我的情况下，我没有给我的<input>元素任何ID，并使用一个类应用dateselect器在SeanJA的答案，但datepicker只适用于第一个。 我发现JQuery自动添加了一个ID，它在所有元素中都是一样的，这就解释了为什么只有第一个获取date图标。
