Prompting for start and end dates

HTML coding

The HTML layout is simple. Two date inputs inside a form:

<form id="flight">
  <label>
    Arrival <br/>
    <input type="date" name="arrival" value="Today"/>
  </label>
 
  <label>
    Departure <br/>
    <input type="date" name="departure" data-value="7" value="After one week"/>
  </label>
</form>

CSS coding

We use two stylesheets for the job as follows:

<!-- wrapper, inputs and labels  -->
<link rel="stylesheet" type="text/css"
      href="/media/css/dateinput/flight.css"/>
 
<!-- calendar styling -->
<link rel="stylesheet" type="text/css"
      href="/media/css/dateinput/flight-calendar.css"/>

Study the semi-commented source code for the details.

JavaScript coding

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.

$(":date").dateinput({ trigger: true, format: 'dd mmmm yyyy', min: -1 })

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:

// use the same callback for two different events. possible with bind
$(":date").bind("onShow onHide", function()  {
	$(this).parent().toggleClass("active");
});

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:

// when first date input is changed
$(":date:first").data("dateinput").change(function() {
	// we use it's value for the seconds input min option
	$(":date:last").data("dateinput").setMin(this.getValue(), true);
});

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.