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?
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.
The <input type="date"> defines a date picker. The resulting value includes the year, month, and day.
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.
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.
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
.
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
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With