Native datepicker on Chrome and fallback for IE/Firefox

Question

Along with HTML5 came a new set of input types. One of these is date and in Chrome this input produces a nice native date picker like the one shown below.

It also provides native date pickers on mobile devices which is my main strong point for using the new input type.

However, on Firefox (23.0.1) and IE (10), a native date picker doesn't appear and the input is treated as a normal text input. It's in these cases I want to fall back to a Javascript date picker.

The site this is for runs AngularJS and the current datepicker plugin is bootstrap-datepicker. What's the easiest way for me to disable this plugin if the browser supports native date pickers? Do I just need to check if the browser supports the date input type and disable the plugin if that's the case?

Answer 1

You can do an HTML5 feature check like so:

// Determine if this browser supports the date input type.
var dateSupported = (function() {
    var el = document.createElement('input'),
        invalidVal = 'foo'; // Any value that is not a date
    el.setAttribute('type','date');
    el.setAttribute('value', invalidVal);
    // A supported browser will modify this if it is a true date field
    return el.value !== invalidVal;
}());

Then only initialize the bootstrap datepicker if !dateSupported.

Answer 2

I did the feature check like this. It includes the check if the picker is needed at all.

if (
  $('input[type="date"]').length
  && $('input[type="date"]').get(0).type == "date") {

  // Load Fallback Date Picker
}