web-dev-qa-db-fra.com

Appliquer jQuery datepicker à plusieurs instances

J'ai un contrôle de sélecteur de date jQuery qui fonctionne bien pour une seule instance, mais je ne sais pas comment le faire fonctionner pour 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 la boucle For Each, cela fonctionne bien, mais s'il y a plus d'un élément dans la collection "MyRecords", seule la première zone de texte obtient un sélecteur de date (ce qui est logique puisqu'il est lié à l'ID). J'ai essayé d'affecter une classe à la zone de texte et de spécifier:

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

mais alors que cela affiche un sélecteur de date partout, ils mettent tous à jour la première zone de texte.

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

javascriptjqueryjquery-ui
68
gfrizzle

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 le simplifier)

114
SeanJA

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

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

10
Shuo

La réponse évidente serait de générer différents identifiants, un identifiant 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%>

Comme je ne connais pas ASP.net, j’ai simplement ajouté un code de syntaxe générale semblable à C, entre crochets. Le traduire en code ASP.net ne devrait pas poser de problème.

Ensuite, vous devez trouver un moyen de générer autant de

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

comme éléments dans votre Model.MyRecords. Encore une fois, votre compteur est placé entre crochets; votre fonction jQuery ressemblerait à quelque chose comme:

<script type="text/javascript">
    $(function() {
        $('#my_date1').datepicker();
        $('#my_date2').datepicker();
        $('#my_date3').datepicker();
        ...
    });
</script>
4
evilpenguin
<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>
4
codeguru

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>
3
Deepak Singh

Lors de l'ajout de datepicker aux zones de texte d'entrée générées à l'exécution, vous devez vérifier s'il contient déjà datepicker, puis commencez par supprimer la classe hasDatepicker, puis appliquez datePicker.

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

Un petit mot à la réponse de SeanJA.

Fait intéressant, si vous utilisez KnockoutJS et jQuery ensemble Les entrées suivantes avec des ID différents , mais avec la même liaison de données observable :

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

liera un (le même) datepicker aux deux entrées (même si elles ont des identifiants ou des noms différents).

Utilisez des observables distincts dans votre ViewModel pour lier un sélecteur de date distinct à chaque entrée:

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

Initialisation:

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

La solution ici est d’avoir différents identifiants, comme beaucoup d’entre vous l’ont déclaré. Le problème réside toujours plus profondément dans Datepicker. S'il vous plaît, corrigez-moi, mais le pointpicker n'a pas un ID wrapper - "ui-datepicker-div." Cela se voit sur http://jqueryui.com/demos/datepicker/#option-showOptions dans la thématisation.

Existe-t-il une option permettant de changer cet identifiant en classe? Je ne veux pas avoir à fourcher ce script juste pour ce correctif évident !!

0
Alex Grande

J'avais le même problème, mais j'ai finalement découvert qu'il s'agissait d'un problème lié à la façon dont j'appelais le script à partir d'un contrôle d'utilisateur Web ASP. J'utilisais ClientScript.RegisterStartupScript(), mais j'ai oublié de donner au script une clé unique (le deuxième argument). Les deux scripts étant affectés de la même clé, seule la première boîte a été convertie en sélecteur de date. J'ai donc décidé d'ajouter l'ID de la zone de texte à la clé pour la rendre unique:

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

Pour changer l'utilisation de la classe au lieu de l'ID

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

J'ai eu un problème similaire avec l'ajout dynamique de classes datepicker. La solution que j'ai trouvée consistait à commenter la ligne 46 de datepicker.js 

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

Dans mon cas, je n’avais donné à mes éléments <input> aucun ID et utilisais une classe pour appliquer le sélecteur de date comme dans la réponse de SeanJA, mais le sélecteur de date n’était appliqué que pour le premier. J'ai découvert que JQuery ajoutait automatiquement un identifiant et que c'était le même dans tous les éléments, ce qui expliquait pourquoi seul le premier était classé par date. 

0
jamsandwich