HTML5 Date Input Type Interfering with jQuery Datepicker

Question

I am using the jQuery UI\'s datepicker for date selections on my site. One of my users just upgraded to the newest version of Chrome, which has built-in native date picker f

Answer 1

Add novalidate attribute to your form to remove browser's build-in validation.

<form action="login.htm" novalidate>

See this link for more info.

Answer 2

Either switch from using input[type=date] to input[type=text] or use Modernizr to detect support for the native datepicker. I've wrote a post about the implications of both options here - http://tjvantoll.com/2012/06/30/creating-a-native-html5-datepicker-with-a-fallback-to-jquery-ui/.

Answer 3

Use Modernizr or similar library to feature detect if the browser supports the input type=date, and then load the jQuery UI datepicker if if does not.

if (!Modernizr.inputtypes.date) {
    $('input[type=date]').datepicker();
}

Answer 4

Sometimes you cannot modify form types. For example, I'm using Symfony2 Bundle's FormType.

I had this problem using Genemu jQuery Datepicker, and I solved this problem adding a calendar image button and a litle of css code.

You can see final result in this link

Here you can read documentation for adding image icon: jQuery UI Datepicker

Then, I simple added a css like this (maybe style rules will be different for you):

form input[type=date] + img {
    position: relative;
    left: -25px;
}