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 for HTML5. The big problem as the two UIs overlap each other. The other problem is when the user submits a date, the date in database reverts to "0000-00-00" and is producing bad data.

If I remove the jQuery datepicker, most of the users not using the latest-greatest browsers will not have a popup date picker. And, those who have the newest browser will have two overlapping calendars which breaks the application. My question is how do I disable the newest browsers from displaying the built-in date function and just continue to use the jQuery Datepicker?

jmoerdyk · Accepted Answer · 2012-07-02 16:50:46Z

39

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();
}

answered Jul 2, 2012 at 16:50

jmoerdyk

5,5448 gold badges43 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Neon Over a year ago

where do place the code above? Also, do I call the modernizr.js script in my header?

jmoerdyk Over a year ago

Yes, you need to reference the moderizr.js in your header with a script tag. And you would place the above code wherever you are currently calling the .datepicker() method. Posting your existing code would help.

Luke Over a year ago

This solution worked for me! Here are instructions for installing Modernizr: modernizr.com/docs/#installing

Luke Over a year ago

Also, if you run into a dependency error with your Modernizr custom build (such as this one - github.com/Modernizr/Modernizr/issues/849) do a Google search to see what other selections need to be included in your build. They say this should be fixed in v3.

TJ VanToll · Accepted Answer · 2012-07-02 17:59:24Z

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/.

answered Jul 2, 2012 at 17:59

TJ VanToll

12.7k5 gold badges46 silver badges45 bronze badges

Comments

edrian · Accepted Answer · 2012-10-23 17:03:43Z

0

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;
}

edited Oct 23, 2012 at 17:03

answered Oct 23, 2012 at 16:58

edrian

4,5315 gold badges34 silver badges35 bronze badges

Comments

MaxZoom · Accepted Answer · 2015-11-23 17:29:35Z

0

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

<form action="login.htm" novalidate>

See this link for more info.

answered Nov 23, 2015 at 17:29

MaxZoom

7,7635 gold badges30 silver badges45 bronze badges

Collectives™ on Stack Overflow

HTML5 Date Input Type Interfering with jQuery Datepicker

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related