HTML5 Date Input Type Interfering with jQuery Datepicker

html, jquery-ui

Solution

Use Modernizr or similar library to feature detect if the browser supports the `input type=date`, and then load the jQuery UI datepicker if if does not.

if (!Modernizr.inputtypes.date) {
    $('input[type=date]').datepicker();
}

Problem

I am using the jQuery UI's datepicker for date selections on my site. One of my users just upgraded to the newest version of Chrome, which has built-in native date picker for HTML5. The big problem as the two UIs overlap each other. The other problem is when the user submits a date, the date in database reverts to "0000-00-00" and is producing bad data. If I remove the jQuery datepicker, most of the users not using the latest-greatest browsers will not have a popup date picker. And, those who have the newest browser will have two overlapping calendars which breaks the application. My question is how do I disable the newest browsers from displaying the built-in date function and just continue to use the jQuery Datepicker?

Original source