Appliquer jQuery datepicker à plusieurs instances

Question

Appliquer jQuery datepicker à plusieurs instances

Demandé el 1 de Avril, 2009: Quand la question a-t-elle été
46835 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

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?

Demandé el 1 de Avril, 2009 par gfrizzle

Answer 1

5 Réponses

Answer 2

126voto

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)

Répondu el 1 de Avril, 2009 par SeanJA (4150 Points )

Answer 3

11voto

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.

Répondu el 6 de Décembre, 2010 par Shuo (1655 Points )

Answer 4

5voto

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>

Répondu el 1 de Avril, 2009 par evilpenguin (2611 Points )

Answer 5

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>

Répondu el 15 de Janvier, 2010 par codeguru (1 Points )

Answer 6

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>

Répondu el 19 de Février, 2014 par Deepak Singh (47 Points )

Appliquer jQuery datepicker à plusieurs instances

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Appliquer jQuery datepicker à plusieurs instances

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: