Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML5 Date Input Type Interfering with jQuery Datepicker

Tags:

html

jquery-ui

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?

like image 733
Neon Avatar asked Jul 02 '12 16:07

Neon


People also ask

Why Datepicker is not working in HTML?

You need to include jQuery, and include it before jQuery UI. You also need to move your code to the end of your document or wrap it in a document ready call. Include a reference to jQuery before jQuery UI. Thanks for the response .

How do I restrict dates on date picker?

You can restrict the users from selecting a date within the particular range by specifying MinDate and MaxDate properties. The default value of MinDate property is 1/1/1920 and MaxDate property is 12/31/2120 . Dates that appears outside the minimum and maximum date range will be disabled (blackout).

How do I fix my Datepicker position?

To change the position of the jQuery UI Datepicker just modify . ui-datepicker in the css file. The size of the Datepicker can also be changed in this way, just adjust the font size.

How do I stop Datepicker pop up?

$(document). mouseup(function (e) { $('#example1'). Close(); });


1 Answers

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();
}
like image 198
jmoerdyk Avatar answered Oct 04 '22 11:10

jmoerdyk