35

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?

Reda Lemeden
  • 1,017
  • 1
  • 10
  • 16
  • 1
    I would remove the [type=date]. For better or worse, the jQuery UI plugin is going to give you much more fine grained control. – TJ VanToll Jun 30 '12 at 02:18
  • 5
    Indeed, except that the plugin is nearly unusable on touch devices. The advantage of preserving the type, beside being the semantically right thing to do, is to take advantage of the native date and time picker on touch devices. – Reda Lemeden Jun 30 '12 at 12:59
  • Gotcha, that's a legitimate use case. I'll update my answer. – TJ VanToll Jun 30 '12 at 20:54
  • I believe current versions of Chrome have eliminated this problem. – Blazemonger Nov 14 '13 at 18:52

4 Answers4

41

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.

TJ VanToll
  • 12,584
  • 4
  • 43
  • 45
  • Check out the [Webshim](http://afarkas.github.com/webshim/demos/) library which, among other things, does this kind of feature-based polyfilling (it uses Modernizr & jQuery UI too), but for all input types and also implements all of the HTML5 forms JS APIs (for validation, accessibility, etc) – Stu Cox Dec 12 '12 at 18:32
  • 1
    Seems like this would break when Chrome gets to version 30 – Bryan Jan 17 '13 at 22:29
  • @Bryan Why's that (Interested to know as I currently use a fix similar to the above) – calumbrodie Mar 07 '13 at 03:12
  • Because he is checking for the string of "Chrome/2". Once we get to version 30, that string will no longer be part of the userAgent. – Bryan Mar 07 '13 at 16:39
  • There are couple of good answers here: http://stackoverflow.com/questions/11320615/disable-browser-native-datepicker (@Jimbo and @pgn) – yorch Mar 21 '13 at 19:27
  • I removed the explicit version checking of Chrome since it broke in Chrome 30. It wasn't intended to be used but it might as well be correct. – TJ VanToll Dec 16 '13 at 20:18
3

To remove the arrow and spin buttons:

.unstyled::-webkit-inner-spin-button,
.unstyled::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

You can still active the calendar by pressing Alt+Down Arrow(checked on windows 10).

To disable, you need to add a little JavaScript: 

dateInput.addEventListener('keydown', function(event) {
    if (event.keyIdentifier == "Down") {
        event.preventDefault()
    }
}, false);
Rakesh Vadnal
  • 975
  • 1
  • 10
  • 22
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);
Jeff Tian
  • 5,210
  • 3
  • 51
  • 71
0

I completely agree with TJ.

If you're doing any sort of editing, pre-filling, or dynamic setting of date values, you'll also need to know that as of 7/3/13 Chrome only honors the ISO standard date format (yyyy-mm-dd). It will display dates to the user in local format ('mm/dd/yy' for the US) but will ignore any values set in the HTML that are not ISO standard format.

To convert on page load, you can use TJ's user agent sniffer and do this:

if (navigator.userAgent.indexOf('Chrome/2') != -1) {
    $('input[type=date]').each(function(){
        var d = trim(this.getAttribute('value'));
        if (d){
            d = new Date(d);
            var dStr = d.toISOString().split('T')[0];
            this.value = dStr; 
        }
    });
}

If, for example, you opt to disable the native datepicker and use jQuery's, you'll also need to set the date format to match Chrome's date field, or it won't display the input that the jQuery datepicker is sending it:

$('#myDate').datepicker({dateFormat: 'yy-mm-dd'});

Add those two things to the first option in TJ's answer and you have jQuery's datepicker working in Chrome without errors!

Relying on native datepickers is ideally the best solution. But when you need something that supports black-out dates, date ranges, or you just plain want it to look prettier, this will work.

GitaarLAB
  • 14,536
  • 11
  • 60
  • 80
Jon Weers
  • 1,604
  • 17
  • 27