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