JQuery Datepicker pour plusieurs champs d'entrée .NET MVC ne fonctionne pas

Question

J'ai simplifié mon travail pour cette question mais le même problème persiste. J'utilise l'aide HTML Textbox pour afficher des zones de texte vides lorsque je parcours les éléments de ce modèle.

<% foreach (var item in Model) { %> 

<tr> 
<td><%: item.ID %></td> 
<td><%: Html.TextBox("usernames", null, new { @class = "datepicker" }) %></td> 
<td><%: item.Password %></td> 
<td> <%: item.Race %></td> 
</tr> 

<% } %> 

Parce que j'ai plusieurs lignes cela produit plusieurs champs tous avec la classe "datepicker". Je demande la JQuery suivante pour le datepicker:

$(document).ready(function() { 
$('input').filter('.datepicker').datepicker({ 
dateFormat: "dd/mm/yy", 
onSelect: function (value, date) { 
alert(this.value); 
} 
}); 
}); 

Lorsque la page rend, chaque zone de texte crée un calendrier comme prévu, mais il met toujours la date dans la zone de texte en ligne un. J'ai besoin de la date pour aller dans la zone de texte à côté du calendrier. Le code HTML pour le code ci-dessus semble bien:

<tr> 
<td>6</td> 
<td><input class="datepicker" id="usernames" name="usernames" type="text" value="" /></td> 
<td>dinosaur</td> 
<td> 1</td> 
</tr> 

Interstingly, si je crée simplement 4 de la classe « DatePicker » tout va bien. C'est la façon dont les helpers html créent pour vous.

Aidez-nous!

Answer 1

La réponse est de donner aux zones de texte générées des identifiants uniques comme ci-dessous sinon cela ne fonctionnera pas.

<% foreach (var item in Model) { %> 

<tr> 
<td><%: item.ID %></td> 
<td><%: Html.TextBox("usernames", null, new { ID=item.ID @class = "datepicker" }) %></td> 
<td><%: item.Password %></td> 
<td> <%: item.Race %></td> 
</tr> 

<% } %>