Prompting for start and end dates
One dateinput can control another. Select an arrival date and it is set as the earliest selectable departure date. Enjoy the endless skinning possibilities of jQuery Tools Dateinput.
The HTML layout is simple. Two date inputs inside a form:
Study the semi-commented source code for the details.
We use this one-liner to initialize both date inputs. Since these are imaginary flight dates we need to disable selecting dates from the past. This is achieved with the min attribute. Enabling the trigger attribute will auto-generate a a tag that opens up the calendar when clicked. The calendar icon look is obviously made with CSS.
The active state
The date inputs are contained inside a label element. Once the calendar is opened we assign the CSS class name "active" to the label element and remove the class name when the calendar closes. This is how we do it:
The active state styling can be found in the flight.css file.
Changing the minimum value for the departure date
When the arrival date is selected we must make sure that user cannot select a departure date that comes before the arrival date. This is achieved by using the setMin method for the departure date as follows:
You need to place the script block after the HTML code or you can alternatively use jQuery's $(document).ready to execute the script as soon as the webpage's Document Object Model (DOM) has been loaded. Read more about that from the User's Manual.