HTML5 brings great new features which will ease development. However, currently there is a gap between browsers that support HTML5 attributes and those who do not. As of October around 60% of desktop browsers and 80% of mobile devices are HTML5 compliant. This means developers still need support the additional 40% which fallback techniques.

HTML5 date input field

A good example is the new date input field. If your browser is HTML5 compliant it generate a date picker for you to use automatically, thus only requiring the developer to create the input field as so:

<input name="start_date" type="date" placeholder="mm/dd/yyyy" />

If the browser does not support HTML5 then no restriction on the date format will occur. This is why javascript is a beautiful tool.

Providing a fallback

Using a combination of Modernizr, jQuery, and bootstrap-datetimepicker javascript libraries a HTML5 date field can be emulated. Modernizr is a library use for feature detection. It can recognize if the HTML5 date object is available to the browser. If the date object is not available then the bootstrap-datetimepicker will bind to the input and provide a calendar for the user.

The following is the javascript which a datetime picker to the input field below if necessary.

$(document).ready(function () {
    // If they do not have HTML5 date then provide a datepicker using javascript
    if (!Modernizr.inputtypes.date) {
            
        $('#startDatetime').datetimepicker({
            pickDate: true,
            pickTime: false
        });
            
     }
});

The input field has classes attached that are from the bootstrap 3 library. These libraries add a hint of design to the end result.

<div class="input-group date" id="startDatetime">
   <input name="end_date" type="date" placeholder="mm/dd/yyyy" class="form-control"/>
   <span id="endDateIcon" class="input-group-addon">
      <span class="glyphicon glyphicon-calendar"></span>
   </span>
</div>

Note: In this example I used the bootstrap-datetimepicker library, however any javascript date picker may be substituted in its place. The following libraries were used: bootstrap3, modernizr, momentjs (required by bootstrap-datepicker), and jQuery 2.1.0.

A example of this project can be seen on JSFiddle.