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>

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

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

Answer 6

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

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

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

将一个（相同的）datepicker绑定到两个输入（即使它们具有不同的id或名称）。

在ViewModel中使用单独的observable 将单独的日期选择器绑定到每个输入：

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

Answer 8

这里的解决方案是拥有不同的ID，正如您所说的那样。问题仍然存在于datepicker中。请纠正我，但不是日期选择器有一个包装ID - “ui-datepicker-div”。这可以在主题http://jqueryui.com/demos/datepicker/#option-showOptions中看到。

是否有可以将此ID更改为类的选项？我不想只为了这个明显的修复而分叉这个脚本!!

Answer 9

更改使用class而不是ID

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

Answer 10

我遇到了同样的问题，但最后发现这是我从ASP Web用户控件调用脚本的方式的问题。我正在使用ClientScript.RegisterStartupScript()，但忘了给脚本一个唯一的键（第二个参数）。在为两个脚本分配相同的密钥时，只有第一个框实际上被转换为日期选择器。所以我决定将文本框的ID附加到密钥以使其唯一：

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

Answer 11

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

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

Answer 12

在我的情况下，我没有给我的Mgr2<int, double> mgr; mgr.get<int>(); // retrieves the Container<int> element元素任何ID，并且正在使用类来应用日期选择器，如SeanJA的答案，但是datepicker仅应用于第一个。我发现JQuery自动添加了一个ID，它在所有元素中都是相同的，这解释了为什么只有第一个才能获得datepickered。

将jQuery datepicker应用于多个实例

12 个答案: