jQuery Datepicker: Arrivée et départ champs de texte?

Question

Excusez-moi si c'est un double question, mais il est un peu difficile à violon à travers toutes les demandes datepicker ..

Je cherche essentiellement à mettre en œuvre ceci:

Je ne suis pas vraiment familier avec l'utilisation de datepicker autre qu'une installation triviale. Quelqu'un a-t-il dû mettre cela en œuvre avant, et si oui, comment l'avez-vous configuré pour gérer les champs de texte d'arrivée et de départ?

Questions Divers:

• Est-ce que vous devez avoir à séparer les instances du datepicker?
• Des pièges étranges? Ou est-ce facile avec les options de configuration?

notes de fonctionnalité:

• Par défaut, les champs de texte seront vides.
• Si vous cliquez sur l'arrivée, le calendrier apparaîtra
• Après avoir sélectionné la date d'arrivée dans le calendrier, il doit se concentrer automatiquement sur le départ afin que le calendrier reste en place.
• Le calendrier doit aller si vous cliquez sur

Je vous remercie de tout comprendre, vous ne devez pas me fournir nécessairement avec une démo de travail entièrement ou quoi que ce soit.

Answer 1

Je n'ai pas eu à implémenter une situation que vous décrivez, mais j'ai utilisé jQueryUI datepicker sur quelques projets, et c'est assez simple à utiliser. Le seul problème que j'ai eu, c'est que le thème a tendance à rendre le datepicker un peu plus grand que je préférerais (donc je dois style autour de cela). Mais sa fonctionnalité fonctionne à peu près comme annoncé.

En ce qui concerne votre scénario, j'ai mis une démo rapide ensemble sur jsfiddle here. Je l'ai mis en place rapidement, mais je pense que cela répond à la plupart de vos besoins. La seule chose dont je ne suis pas content, c'est qu'il y a un scintillement entre la sélection de la première date, le déplacement de la mise au point vers la deuxième zone de texte et l'affichage du calendrier. Je suis toujours en train de le regarder, mais je n'ai pas été capable d'empêcher le piqueur d'essayer de fermer quand la première date est sélectionnée.

Il y a beaucoup de code n'a pas été pour le faire fonctionner:

$(function() { 
    $('.tripDate').datepicker({ 
     numberOfMonths: 2, 
     onSelect: function(dateText, inst) { 
      if($(this).attr("id")==="datepicker_arrive") { 
      $('#datepicker_depart').focus(); 
       $(inst).datepicker("show"); 
      } 
     } 
    }); 

});​ 

J'ai attribué une classe à la fois les arrivées et des départs des zones de texte de date. Lorsqu'une date est sélectionnée, le onSelect se déclenche et, si la zone de texte en cours est la date d'arrivée ($(this)), placez le focus sur la zone de texte de la date de départ et affichez à nouveau le sélecteur de date. (C'est là que je n'arrive pas à avoir à montrer à nouveau le datepicker.)

Je pense qu'il y a juste une instance de la datepicker même s'il y a deux zones de texte. Le programme datepicker est conscient de la date sélectionnée dans chaque zone de texte et mettra cette date en surbrillance en conséquence.Dans l'ensemble, je pense que cela vous met dans la bonne direction. Faites-moi savoir s'il y a d'autres questions et je mettrai à jour ma réponse en conséquence.

Espérons que cela aide!

Answer 2

Vous seriez en mesure de le faire en utilisant my datepicker mais cela nécessiterait un codage supplémentaire de votre part.

Pour vous donner quelques conseils:

• Vous devrez probablement envie de relier les ramasseurs ensemble de sorte qu'une fois la date d'arrivée est sélectionnée, la date de départ doit être par la suite (voir start and end date demo).
• Vous voulez passer closeOnSelect: false au premier sélecteur de date et d'écouter le événement dateSelected (la fin de début démo ci-dessus aussi écoute de l'événement dateSelected - dans votre cas, vous voulez appeler dpDisplay sur la deuxième entrée une fois que la première entrée a été sélectionnée.
• on dirait que vous voulez deux mois visibles en même temps que vous aurez besoin d'utiliser le plug-in d'extension datePickerMultiMonth.

Hope it helps, demander si cela soulève d'autres questions ...