68 votes

Appliquer jQuery datepicker à plusieurs instances

J'ai un jQuery contrôle de sélecteur de date qui fonctionne bien pour une fois, mais je ne suis pas sûr de la façon de faire fonctionner plusieurs instances.

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

Sans le Pour Chaque boucle, il fonctionne très bien, mais si il n'y a plus d'un élément dans le "MyRecords de la collection", seule la première zone de texte reçoit un sélecteur de date (ce qui est logique puisque c'est lié à l'ID). J'ai essayé affectation d'une classe à la zone de texte et en spécifiant:

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

mais tout cela montre un sélecteur de dates partout, ils ont tous de mise à jour de la première zone de texte.

Quelle est la bonne façon de faire ce travail?

115voto

SeanJA Points 4150

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

scénario:

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

(pseudo-codé un peu pour que ce soit plus simple)

10voto

Shuo Points 1655

Je viens d'avoir le même problème.

La manière correcte d'utiliser le choix de date est $('.my_class').datepicker(); mais vous devez vous assurer de ne pas attribuer le même identifiant à plusieurs datepickers.

4voto

codeguru Points 1
<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>

4voto

evilpenguin Points 2611

La réponse la plus évidente serait de générer des identifiants différents, un id distinct pour chaque zone de texte, quelque chose comme

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

Je ne sais pas ASP.net alors j'ai juste ajouté un peu général, C une syntaxe de type code à l'intérieur des crochets. De le traduire en réel ASP.net le code ne devrait pas être un problème.

Ensuite, vous devez trouver un moyen de produire autant d'

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

comme éléments dans votre Model.MyRecords. Encore une fois, à l'intérieur des crochets est votre compteur, de sorte que votre fonction jQuery serait quelque chose comme:

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

3voto

Deepak Singh Points 47

Il y a une solution simple.

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

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by: