Chrome type="date" and jquery ui date picker clashing

Chrome 27 now supports datepicker field types (Just like Opera already does)

You can check with modernizr.js if date field is supported. Modernizr.inputtypes.date returns true if date field is supported by browser.

The following code sets JQuery UI datepicker only if date field is not supported:

<script src="modernizr.js"></script><script>Modernizr.load({  test: Modernizr.inputtypes.date,  nope: ['http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js', 'jquery-ui.css'],  complete: function () {    $('input[type=date]').datepicker({      dateFormat: 'yy-mm-dd'    });   }});</script>

Using Modernizr to detect HTML5 features and provide fallbacks

I handled in a tricky way, i have my date field as type="text" and i have added an attribute as data-type="date"

In jquery, i am running a code to dynamically replace type="text & data-type="date" to type="date", so the browser doesn't make it a date field on load but my jquery ui datepicker is called as i am dynamically adding it as type="date"... :)

Hope it is helpful to someone..

You can just remove the type of "date" and switch it to "text" like in the following fiddle: best of luckjsfiddle

removeDefaultDate = function(){    $('input[type=date]').each(function(){        this.type="text";    });    $('input[type=date]').datepicker({dateFormat: 'yy-mm-dd'});}