Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Native datepicker on Chrome and fallback for IE/Firefox

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.

Datepicker

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?

like image 882
John Dorean Avatar asked Feb 05 '14 15:02

John Dorean


People also ask

How do I make input type Date support on all browsers?

Just use <script src="modernizr. js"></script> in the <head> section, and the script will add classes which help you to separate the two cases: if it's supported by the current browser, or if it's not. Save this answer.

How do I make a date picker in HTML?

The <input type="date"> defines a date picker. The resulting value includes the year, month, and day.

How do I show calendar pop when input type date is on focus?

Open the DatePicker popup upon focusing input of DatePicker in JavaScript (ES5) DatePicker control. To open the DatePicker popup upon input click by using show method in the focus event.

Does Safari support input type date?

Note: Date and time input types is Partially Supported on Safari 15, which means that any user who'd be accessing your page through Safari 15 can see it perfectly. Browser incompatibility may be due to any other web technology apart from Date and time input types.


2 Answers

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.

like image 53
Scottux Avatar answered Sep 19 '22 17:09

Scottux


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
}
like image 38
netAction Avatar answered Sep 19 '22 17:09

netAction