Nonnative Datepicker only when needed

Uses jquery, jquery UI, and modernizr to detect if there is a native datepicker

by itsazzad

HTML

<script src="http://modernizr.com/downloads/modernizr-latest.js"></script>
<input type="date">

<br><br>
    
<input type="text" id="myDate" />

JavaScript

/* Option A. Use native datepicker whenever it exists */
$(function() {
    if (!Modernizr.inputtypes['date']) {
        $('input[type=date]').datepicker();
    }
});

/* Option B. Use native datepicker only when it exists and client is using a touch device (e.g. like an iphone) */
if (Modernizr.touch && Modernizr.inputtypes.date) {
    document.getElementById('myDate').type = 'date';
} else {
    $('#myDate').datepicker();
}