将 jQuery 日期选择器应用于多个实例

Question

I've got a jQuery date picker control that works fine for once instance, but I'm not sure how to get it to work for multiple instances.我有一个 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%>

Without the For Each loop, it works fine, but if there's more than one item in the "MyRecords" collection, then only the first text box gets a date picker (which makes sense since it's tied to the ID).如果没有 For Each 循环，它可以正常工作，但如果“MyRecords”集合中有多个项目，则只有第一个文本框会获得日期选择器（这很有意义，因为它与 ID 相关联）。 I tried assigning a class to the text box and specifying:我尝试将 class 分配给文本框并指定：

$('.my_class').datepicker();

but while that shows a date picker everywhere, they all update the first text box.但是虽然到处都显示了一个日期选择器，但它们都更新了第一个文本框。

What is the right way to make this work?使这项工作的正确方法是什么？

Answer 1

html: 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" />

script:脚本：

$('.datepick').each(function(){
    $(this).datepicker();
});

(pseudo coded up a bit to keep it simpler) （伪编码了一点以使其更简单）

Answer 2

I just had the same problem.我只是有同样的问题。

The correct way to use date pick is $('.my_class').datepicker();使用日期选择的正确方法是$('.my_class').datepicker(); but you need to make sure you don't assign the same ID to multiple datepickers.但您需要确保没有将相同的 ID 分配给多个日期选择器。

Answer 3

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

The obvious answer would be to generate different ids, a separate id for each text box, something like显而易见的答案是生成不同的 id，每个文本框都有一个单独的 id，比如

[int i=0]
<% Using Html.BeginForm()%>
<% For Each item In Model.MyRecords%>
[i++]
<%=Html.TextBox("my_date[i]")%> <br/>
<% Next%>
<% End Using%>

I don't know ASP.net so I just added some general C-like syntax code within square brackets.我不知道 ASP.net 所以我只是在方括号内添加了一些通用的类似 C 的语法代码。 Translating it to actual ASP.net code shouldn't be a problem.将其转换为实际的 ASP.net 代码应该不是问题。

Then, you have to find a way to generate as many然后，您必须找到一种方法来生成尽可能多的

$('#my_date[i]').datepicker();

as items in your Model.MyRecords .作为Model.MyRecords中的项目。 Again, within square brackets is your counter, so your jQuery function would be something like:同样，方括号内是您的计数器，因此您的 jQuery function 将类似于：

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

Answer 5

There is a simple solution.有一个简单的解决方案。

<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

When adding datepicker at runtime generated input textboxes you have to check if it already contains datepicker then first remove class hasDatepicker then apply datePicker to it.在运行时添加 datepicker 生成的输入文本框时，您必须检查它是否已经包含 datepicker 然后首先删除 class hasDatepicker 然后将 datePicker 应用于它。

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

Answer 7

A little note to the SeanJA answer.对 SeanJA 答案的一点说明。

Interestingly, if you use KnockoutJS and jQuery together the following inputs with different IDs , but with the same data-bind observable :有趣的是，如果您将KnockoutJS 和 jQuery 一起使用，则以下输入具有不同的 ID ，但具有相同的数据绑定 observable ：

<data-bind="value: first_dt" id="date_1" class="datepick" />
<data-bind="value: first_dt" id="date_2" class="datepick" />

will bind one (the same) datepicker to both of the inputs (even though they have different ids or names).会将一个（相同的）日期选择器绑定到两个输入（即使它们具有不同的 id 或名称）。

Use separate observables in your ViewModel to bind a separate datepicker to each input:在 ViewModel 中使用单独的 observable将单独的日期选择器绑定到每个输入：

<data-bind="value: first_dt" id="date_1" class="datepick" />
<data-bind="value: second_dt" id="date_2" class="datepick" />

Initialization:初始化：

$('.datepick').each(function(){
    $(this).datepicker();
});

Answer 8

The solution here is to have different IDs as many of you have stated.这里的解决方案是像你们中的许多人所说的那样拥有不同的 ID。 The problem still lies deeper in datepicker.问题仍然存在于日期选择器中。 Please correct me, but doesn't the datepicker have one wrapper ID - "ui-datepicker-div."请纠正我，但日期选择器没有一个包装器 ID -“ui-datepicker-div”。 This is seen on http://jqueryui.com/demos/datepicker/#option-showOptions in the theming.这可以在主题中的http://jqueryui.com/demos/datepicker/#option-showOptions上看到。

Is there an option that can change this ID to be a class?是否有可以将此 ID 更改为 class 的选项？ I don't want to have to fork this script just for this one obvious fix!!我不想仅仅为了这个明显的修复而分叉这个脚本！

Answer 9

I had a similar problem with dynamically adding datepicker classes.我在动态添加日期选择器类时遇到了类似的问题。 The solution I found was to comment out line 46 of datepicker.js我找到的解决方案是注释掉 datepicker.js 的第 46 行

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

Answer 10

In my case, I had not given my <input> elements any ID, and was using a class to apply the datepicker as in SeanJA's answer, but the datepicker was only being applied to the first one.就我而言，我没有为我的<input>元素提供任何 ID，而是使用 class 来应用日期选择器，如 SeanJA 的回答中一样，但日期选择器仅应用于第一个。 I discovered that JQuery was automatically adding an ID and it was the same one in all of the elements, which explained why only the first was getting datepickered.我发现 JQuery 会自动添加一个 ID，并且它在所有元素中都是相同的，这解释了为什么只有第一个被选中。

Answer 11

To change use of class instead of ID更改使用 class 而不是 ID

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

Answer 12

I had the same problem, but finally discovered that it was an issue with the way I was invoking the script from an ASP web user control.我遇到了同样的问题，但最后发现这是我从 ASP web 用户控件调用脚本的方式的问题。 I was using ClientScript.RegisterStartupScript() , but forgot to give the script a unique key (the second argument).我正在使用ClientScript.RegisterStartupScript() ，但忘记给脚本一个唯一的键（第二个参数）。 With both scripts being assigned the same key, only the first box was actually being converted into a datepicker.由于两个脚本被分配了相同的键，实际上只有第一个框被转换为日期选择器。 So I decided to append the textbox's ID to the key to make it unique:所以我决定将 append 文本框的 ID 设置为 key 以使其唯一：

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

将 jQuery 日期选择器应用于多个实例

问题描述

12 个解决方案

解决方案1
118 已采纳 2009-04-01 23:01:40

解决方案2
10 2010-12-06 21:46:10

解决方案3
4

解决方案4
4 2009-04-01 22:45:24

解决方案5
3 2014-02-19 09:34:56

解决方案6
2 2013-10-08 08:54:20

解决方案7
1 2014-11-23 11:06:21

解决方案8
0 2009-11-10 17:44:49

解决方案9
0 2013-07-30 06:46:51

解决方案10
0 2015-09-07 01:23:10

解决方案11
0 2010-11-01 06:54:56

解决方案12
0 2012-01-12 23:18:16

将 jQuery 日期选择器应用于多个实例

问题描述

12 个解决方案

解决方案1 118 已采纳 2009-04-01 23:01:40

解决方案2 10 2010-12-06 21:46:10

解决方案3 4

解决方案4 4 2009-04-01 22:45:24

解决方案5 3 2014-02-19 09:34:56

解决方案6 2 2013-10-08 08:54:20

解决方案7 1 2014-11-23 11:06:21

解决方案8 0 2009-11-10 17:44:49

解决方案9 0 2013-07-30 06:46:51

解决方案10 0 2015-09-07 01:23:10

解决方案11 0 2010-11-01 06:54:56

解决方案12 0 2012-01-12 23:18:16

解决方案1
118 已采纳 2009-04-01 23:01:40

解决方案2
10 2010-12-06 21:46:10

解决方案3
4

解决方案4
4 2009-04-01 22:45:24

解决方案5
3 2014-02-19 09:34:56

解决方案6
2 2013-10-08 08:54:20

解决方案7
1 2014-11-23 11:06:21

解决方案8
0 2009-11-10 17:44:49

解决方案9
0 2013-07-30 06:46:51

解决方案10
0 2015-09-07 01:23:10

解决方案11
0 2010-11-01 06:54:56

解决方案12
0 2012-01-12 23:18:16