jQuery Girl
  1. jQuery Girl
  3. Changer le mois affiché dans jQuery datepicker, selon une autre instance de datepicker
Intereting Posts
Où devrais-je mettre mon code JavaScript? Afficher «Chargement…» dans la liste déroulante Comment écrire une fonction javascript pour charger une diapositive surdimensionnée et explicite Aléatoire une liste non ordonnée J’essaie de faire changer l’en-tête fixe c’est la couleur de fond après avoir fait défiler la page Comment créer des ‘panneaux de galerie coulissante’ avec jQuery / CSS3? JQuery comment .find () insensible à la casse? différence entre ‘$ () & $ (‘ ‘) jQuery ou Javascript pour définir tous les boutons à la largeur du bouton le plus large Remplir select en utilisant ajax json array API Google Feed Loader ignorant les atsortingbuts XML Comment sélectionnez-vous les éléments en fonction de leur style? Slide Toggle liste ordonnée nestede Keydown permettant les chiffres mais pas les symboles de décalage sur iPhone Remplir l’élément à déposer en utilisant un appel ajax et atsortingbuer la valeur sélectionnée

Changer le mois affiché dans jQuery datepicker, selon une autre instance de datepicker

J’ai deux champs datepicker, l’un est ‘ date de début ‘, l’autre ‘ date_fin ‘.

Je voudrais avoir la fonctionnalité qui, après que l’utilisateur a sélectionné « date de début », puis le calendrier « date de fin » devrait afficher par défaut le mois contient la « date de début ».

Si l’utilisateur choisit d’abord la date de fin , le calendrier de la date de début doit indiquer que le mois contient la date de fin sélectionnée.

comment implémenter à l’intérieur de jQuery datepicker? Quelles sont les options datepicker que je devrais définir? 

$("#start_date").datepicker({ //which datepicker options should put here? })

Ceci définit la date par défaut de l’autre calendrier comme vous le souhaitez. Si une date est déjà sélectionnée, cela ne la change pas. 

  $(document).ready(function() { $( "#datepicker" ).datepicker({onSelect: function(dateText, inst) { $( "#datepicker2" ).datepicker( "option", "defaultDate", dateText ); }}); $( "#datepicker2" ).datepicker({onSelect: function(dateText, inst) { $( "#datepicker" ).datepicker( "option", "defaultDate", dateText ); }}); });

Si vous voulez forcer l’autre sélecteur de date à réinitialiser la date déjà sélectionnée sur l’autre mois du calendrier, utilisez ceci: 

 $(document).ready(function() { $( "#datepicker" ).datepicker({onSelect: function(dateText, inst) { $( "#datepicker2" ).datepicker( "setDate" , dateText ) }}); $( "#datepicker2" ).datepicker({onSelect: function(dateText, inst) { $( "#datepicker" ).datepicker( "setDate" , dateText ) }}); });

Ma suggestion est de sauvegarder la date sélectionnée dans datepicker1 et, avant d’afficher le datepicker2 , de définir manuellement la même date. Donc, datepicker1.date == datepicker2.date . J’espère que ça t’aide. 

 var dateselected = ''; $( "#datepicker1" ).datepicker({ onSelect: function(dateText, inst) { dateselected = dateText; } }); $( "#datepicker2" ).datepicker({ beforeShow: function(input, inst) { if(dateselected != '') $( "#datepicker2" ).datepicker('setDate',dateselected); } });

Vous pouvez le voir en cours d’exécution dans le lien suivant: http://jsbin.com/orizi4

Vous pouvez essayer ceci pour éviter à l’utilisateur de sélectionner une end-date inférieure start-date start-date et une start-date start-date supérieure à la start-date de end-date . 

  $("#start_date").datepicker({ defaultDate: '-7d', changeMonth: true, changeYear: true, onSelect: function (dateStr) { $("end-date").datepicker('option', 'minDate', $(this).datepicker('getDate') || '-1m'); } }); $("end-date").datepicker({ defaultDate: new Date(), changeMonth: true, changeYear: true, onSelect: function (dateStr) { $("#start_date").datepicker('option', 'maxDate', $(this).datepicker('getDate') || 0); } });