将jQuery datepicker应用于多个实例

Question

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

但是虽然它在任何地方都显示了日期选择器,但它们都会更新第一个文本框.

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

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

(伪编码一点以保持简单)

Answer 2

我刚遇到同样的问题.

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

Answer 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>