How to disable new date input in Chrome HTML5?

Question

A recent update (V 20.x) of Chrome broke one of my forms with a new built-in date and time input type. I call jQuery UI datepicker in a date field and it worked fine before the update. After the upgrade, Chrome overrides my placeholder and renders the jQuery UI widget unusable.

Any ideas on how I can prevent Chrome from working with my input fields without changing their type?

Answer 1

You have several different options.

You may find 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 trickery is a bad idea , but it will work.

The ideal approach, in my opinion, is to determine if the browser supports the native datepicker, if it uses it, if it does not use the jQuery user interface.

 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 custom date pickers, the user will see this instead of the jQuery user interface. But at least you would not have a clash of functionality, and the user interface would be useful to the end user.

It intrigued me, so I wrote something about using jQuery UI datepicker along with my own 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 talked about using jQuery UI widgets with HTML5 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); 

Answer 3

I totally agree with TJ.

If you are doing any editing, prefilling, or dynamically adjusting date values, you also need to know that with 7/3/13 Chrome only follows the standard ISO date format (yyyy-mm-dd) . It will display dates for the user in a local format ("mm / dd / yy" for the USA), but will ignore any values ​​set in HTML that do not conform to the ISO standard.

To convert to page loading, you can use the TJ UI user 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 choose to disable the native datepicker and use jQuery, you will also need to set the date format according to the Chrome date field or will not display the input that the jQuery date picker sends

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

Add these two things to the first answer variant of TJ, and you have jQuery datepicker working in Chrome without errors!

Relying on native date pickers is the perfect solution. But when you need something that supports strike-out dates, date ranges, or you just want it to look prettier, it will work.

Answer 4

To remove arrows and arrow buttons:

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

You can activate the calendar by pressing Alt + Down Arrow (marked on windows 10).

To disable, you need to add some JavaScript:

 dateInput.addEventListener('keydown', function(event) { if (event.keyIdentifier == "Down") { event.preventDefault() } }, false);