Is jquery datepicker easily capable of doing this?

Question

I basically have to clone the top area with arriving/departure: http://bit.ly/af1uAH

The arrival and departure fields at the top have corresponding calendars. The last time I configured arrival and departure datepickers, they had a "Clear" button.

Does anyone know if this changed between versions or is it still built-in?

If anyone has examples of the top area ( excluding the bottom since that's extra work for me ) I would greatly appreciate it.

Answer 1

The clear button has been removed.

As for examples, are you more concerned about how to add a DatePicker in general, or how to style it to look just like your example?

You can set an icon trigger by passing the option buttonImage: 'images/calendar.gif' into .datepicker() (wrap it in curly braces). You can probably get the fully written out date (ie. 'January 5, 2010') using DatePicker's formatDate() utility function or the altField option.

edit:

To update the departure date as the arrival date is changed, you'll have to use an onSelect option when you enable the arrival DatePicker:

$("#arrival").datepicker({
    onSelect: function(dateText, inst) {
        // calculate newDate
        $("#departure").datepicker("setDate", newDate);
    }
});

newDate can be a number of days from now (like +7) or a formatted date string. I think the best way to figure it out would be to track the original value of the departure date and determine how many days forward or backward the user changed their selection by, then use that number to determine the new arrival date by comparing to the old arrival date. It's tracking a lot of stuff manually, but I'm not sure of a better way. (ick)