Appliquer jQuery datepicker à plusieurs instances

J'ai un contrôle de sélection de date jQuery qui fonctionne bien pour une fois, mais je ne suis pas sûr de savoir comment le faire fonctionner pour plusieurs instances.Appliquer jQuery datepicker à 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 Pour chaque boucle, il fonctionne très bien, mais s'il y a plus d'un élément dans la collection « MyRecords », seule la première zone de texte reçoit un sélecteur de date (ce qui est logique car il est lié à la ID). J'ai essayé assigner une classe à la zone de texte et en spécifiant:

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

mais en qui montre un sélecteur de date partout, ils sont tous à jour la première zone de texte.

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

Source

2009-04-01 gfrizzle

Quelle langue est la <% blah %> choses? –

C'est VB dans une page ASP.NET - juste un moyen rapide d'illustrer le point de la question. – gfrizzle

Assurez-vous que les champs de saisie ne sont pas désactivés, le sélecteur de date ne s'affichera pas pour les champs d'entrée avec l'attribut 'disabled' – bobobobo

106

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 à Gardez-le plus simple)

Source

2009-04-01 23:01:40 SeanJA

Il semble que le cœur de mon problème est que les zones de texte ont toutes le même ID, de sorte que chaque sélecteur de date met à jour la première zone de texte. Votre exemple n'en souffre pas, alors cela fonctionne. Comment puis-je obtenir les ID différents en boucle? – gfrizzle

+14

Duh, ne laissez pas les zones de texte ont le même ID. Parfois, vous devez vous éloigner d'un problème pendant un moment pour obtenir la réponse évidente à la bulle. – gfrizzle

'$ (". Datepick") ne fonctionnerait-il pas? Datepicker(); 'fonctionnera-t-il une fois que vous aurez des identifiants différents dans les champs de saisie? – rapcal

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

Je ne sais pas ASP.net donc je viens d'ajouter un code général de syntaxe C-like entre crochets. La traduction en code ASP.net ne devrait pas poser de problème.

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

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

comme articles dans votre Model.MyRecords. Encore une fois, entre crochets est votre compteur, votre fonction jQuery serait quelque chose comme:

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

Source

2009-04-01 22:45:24 evilpenguin

Ou vous pourriez utiliser des classes pour rendre le JS plus simple ... –

Ya, ce n'est pas vraiment évident répondre ... – SeanJA

La solution ici est d'avoir différents identifiants comme plusieurs d'entre vous l'ont dit. Le problème est encore plus profond dans le datpicker. Corrigez-moi s'il vous plaît, mais le datepicker n'a pas un ID de wrapper - "ui-datepicker-div". Ceci est vu sur http://jqueryui.com/demos/datepicker/#option-showOptions dans le thème.

Existe-t-il une option qui peut changer cet ID pour en faire une classe? Je ne veux pas avoir à fourrer ce script juste pour cette solution évidente !!

Source

2009-11-10 17:44:49

Cela peut être simplement la partie "échantillon" de l'exemple de code.Je ne pense pas qu'il génère réellement une div avec cette identification. S'assurer que chacun de mes objets cibles possédait des ID uniques, tout a fonctionné comme prévu. – gfrizzle

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

Source

2010-01-15 16:16:32 codeguru

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

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

Source

2010-11-01 06:54:56 Aehandasa

Cette réponse est déjà fournie par Shuo – Gowri

Et sûrement nous ne voudrions pas d'approches alternatives ... bien que j'admets que bien que cela fonctionne, je ne l'utiliserais pas. Surtout après avoir vu la réponse acceptée - mais à chacun son sien. – brichins

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

La méthode correcte pour utiliser la sélection de date est $('.my_class').datepicker();, mais vous devez vous assurer que vous n'attribuez pas le même ID à plusieurs datespickers.

Source

2010-12-06 21:46:10 Shuo

J'ai eu le même problème, mais j'ai finalement découvert que c'était un problème avec la façon dont j'appelais le script 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). Avec les deux scripts étant assignés la même clé, seulement la première boîte était en train d'être convertie en datepicker.Je décide donc d'ajouter l'ID de la zone de texte à la clé pour le rendre unique:

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

Source

2012-01-12 23:18:16 kad81

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

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

Source

2013-07-30 06:46:51 mozgras

Lorsque vous ajoutez à datepicker textboxes d'entrée généré d'exécution, vous devez vérifier si elle contient déjà datepicker alors d'abord enlever la classe hasDatepicker puis appliquer Datepicker à elle.

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

Source

2013-10-08 08:54:20

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

Source

2014-02-19 09:34:56

Petite note à la réponse SeanJA.

Fait intéressant, si vous utilisez KnockoutJS et jQuery ensemble les entrées suivantes avec ID différents, mais avec les mêmes données-bind observables:

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

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

Utilisez observables distincts dans votre ViewModel pour lier un datepicker séparé à 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(); 
});

Source

2014-11-23 11:06:21 user1572418

Vous ne devriez jamais travailler de cette façon en combinaison avec KnockoutJS. C'est beaucoup mieux et plus propre si vous liez votre datepicker en utilisant un bindingHandler. – Gigi2m02

Dans mon cas, je ne l'avais pas donné mes <input> éléments tout ID , et utilisait une classe pour appliquer la datepicker comme dans la réponse de SeanJA, mais la datepicker était seulement appliquée au 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 daté.

Source

2015-09-07 01:23:10 jamsandwich

Appliquer jQuery datepicker à plusieurs instances

Répondre

Questions connexes