jQuery Datepicker: Arrival and Depart textfields?

Question

I apologize if this is a duplicate question but it's kind of hard to fiddle through all the datepicker requests..

I'm basically looking to implement this:

I'm not really familiar with using datepicker other than a trivial setup. Has anyone had to implement this before, and if so how did you set it up to handle both arrive/depart textfields?

Misc questions:

• Did you have to have to separate instances of the datepicker?
• Any weird gotchas? Or is it easy with the configuration options?

Functionality notes:

• By default, the textfields will be blank.
• If you click into the arrival, the calendar will popup
• After selecting the arrival date from the calendar, it needs to auto focus to the departure so the calendar has to stay in-place.
• The calendar needs to go away if you click out

I'd appreciate any insight, you don't have to necessarily provide me with a fully working demo or anything.

Answer 1

I haven't had to implement a situation that you describe, but I've used the jQueryUI datepicker on a few projects, and it's pretty straight-forward to use. The only issue that I've had is that the theme's tend to make the datepicker a little larger than I'd prefer (so I have to style around that). But it's functionality pretty much works as advertised.

As far as your scenario, I put a quick demo together on jsfiddle here. I put it together quickly, but I think it satisfies most of your requirements. The only thing I'm not happy with is that there's a flicker between selecting the first date, the shifting of the focus to the second text box and displaying the datepicker again. I'm still looking at it, but I haven't been able to prevent the datepicker from attempting to close when the first date is selected.

There's wasn't much code to get it working:

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

});​

I assigned a class to both the arrive and depart date text boxes. When a date is selected, the onSelect fires and, if the current text box is the arrive date ($(this)), then shift focus to the depart date text box and show the datepicker again. (This is where I can't seem to get around having to re-show the datepicker.)

I think there's just one instance of the datepicker even though there's two text boxes. The datepicker is aware of the selected date in each text box and will highlight that date accordingly.

Overall, I think this gets you in the right direction. Let me know if there are other questions and I'll update my answer accordingly.

Hope this helps!

Answer 2

You would be able to do this using my datepicker although it would require some additional coding on your part.

To give you some hints:

• You will need to probably want to link the pickers together so that once an arrival date is selected the departure date must be afterwards (see start and end date demo).
• You will want to pass closeOnSelect: false to the first date picker and listen for the dateSelected event (the start end demo above also listens to the dateSelected event - in your case you will want to call dpDisplay on the second input once the first input has been selected.
• It looks like you want two months visible at the same time so you will need to use the datePickerMultiMonth extension plugin.

Hope it helps, ask if this raises any further questions...