How can I disable the new Chrome HTML5 date input?

Question

The recent update (V 20.x) of Chrome has broken one of my forms with the new built-in date and time input type. I'm calling jQuery UI datepicker on a date field and it used to work perfectly prior to the update. After the update, Chrome overrides my placeholder and renders the jQuery UI widget unusable.

Any ideas of how I can prevent Chrome from messing up with my input fields without changing their type?

Answer 1

You have a couple of different options.

You could detect that the user is using Chrome by sniffing the user agent string and preventing click events.

if (navigator.userAgent.indexOf('Chrome') != -1) {     $('input[type=date]').on('click', function(event) {         event.preventDefault();     }); } 

User agent sniffing is a bad idea, but this will work.

The ideal approach in my mind is to detect whether the browser supports a native datepicker, if it does use it, if not use jQuery UI's.

if (!Modernizr.inputtypes['date']) {     $('input[type=date]').datepicker({         // Consistent format with the HTML5 picker         dateFormat: 'yy-mm-dd'     });    }​ 

Example - http://jsfiddle.net/tj_vantoll/8Wn34/

Of course since Chrome supports a native date picker the user would see that instead of jQuery UI's. But at least you wouldn't have a clash of functionality and the UI would be usable for the end user.

This intrigued me so I wrote up something about using jQuery UI's datepicker alongside the native control - http://tjvantoll.com/2012/06/30/creating-a-native-html5-datepicker-with-a-fallback-to-jquery-ui/.

Edit

If you're interested, I recently gave a talk on using jQuery UI's widgets alongside HTML5 form controls.

• Slides
• Video

Answer 2

This works for me:

; (function ($) {     $(document).ready(function (event) {         $(document).on('click input', 'input[type="date"], input[type="text"].date-picker', function (e) {             var $this = $(this);             $this.prop('type', 'text').datepicker({                 showOtherMonths: true,                 selectOtherMonths: true,                 showButtonPanel: true,                 changeMonth: true,                 changeYear: true,                 dateFormat: 'yy-mm-dd',                 showWeek: true,                 firstDay: 1             });              setTimeout(function() {                 $this.datepicker('show');             }, 1);         });     }); })(jQuery, jQuery.ui);