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

Question

I have a input box having type="date", everything works fine in IE but in latest version of Chrome it comes with a spinner, Down arrow and with a placeholder of mm/dd/yyyy.

In Chrome, on click of that field Chrome opens a datepicker and i have mapped jquery ui's datepicker for my application use. This both are clashing on them as shown below:

I have applied a fix as below:

input[type="date"]::-webkit-calendar-picker-indicator{
    display:none;
    -webkit-appearance: none;
    margin: 0;
}
input[type="date"]::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0;
}
/** THIS DOESN'T WORK **/
input[type="date"]::-webkit-input-placeholder{
    display:none !important;
    -webkit-appearance: none !important;
        visibility: hidden !important;
}
/** THIS DOESN'T WORK **/

After adding the above code, it looks like wise:

The code above hides the spinner and arrow which fires the Chrome's date picker. But there is a problem, placeholder('mm/dd/yyyy') is still in there for the input textbox; my jquery ui's date picker is coming up fine but when i select any dates, the placeholder is still in there.

No value is setting in that input box.

Need to know how to remove that placeholder for setting the value; also the date format i am using for the application is yyyy/mm/dd.

Chrome version is : Version 27.0.1448.0

Thanks in advance!!!

Answer 1

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

Answer 2

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

Answer 3

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

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

Answer 4

I had a similar problem. In my model/viewmodel I had specified the data type as DataType.Date I noticed when I removed this the date picker started working in Chrome. I think tried change the data type as DataType.DateTime and tried again in chrome. This resolved the issue. Not sure if this applies to anyone else but this caused me lots of headache so this might help someone. This worked in MVC4 using jqueryUI 1.8.20

Answer 5

Google offered another way to resolve this conflict that I found helpful, at the bottom of this post.

var isDateInputSupported = function(){
  var elem = document.createElement('input');
  elem.setAttribute('type','date');
  elem.value = 'foo';
  return (elem.type == 'date' && elem.value != 'foo');
}

if (!isDateInputSupported())  // or.. !Modernizr.inputtypes.date
  $('input[type="date"]').datepicker();

Answer 6

He is what i usually use. I have a few different formats of the datepicker i use, so I don't blanket it to all date inputs. However changing the selector to what works best for you.

<script src="{YourPathHere}modernizr.js"></script>
<script>
$(function () {//DOM ready code
    if (!Modernizr.inputtypes.date) {// Check to see if HTML5 is supported to use EF data annotations, if not use jQuery datepicker
                $('.date-picker').datepicker(
                    {
                        showButtonPanel: true,
                        gotoCurrent: true,
                        changeMonth: true,
                        changeYear: true,
                        showAnim: 'slideDown'
                    }
                );
            }
});// END DOM Ready
</script>