CODEWITHSUNDEEP
jqueryjquery-uigoogle-chromedatedatepicker
GOK
GOK

Reputation: 2428

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

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:

enter image description here

RED show jquery ui date picker below chrome date picker

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:

enter image description here

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

Upvotes: 14

Views: 31801

Answers (6)

Ben Hill
Ben Hill

Reputation: 51

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

Upvotes: 1

Mike
Mike

Reputation: 1673

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>

Upvotes: 0

Joe Naber
Joe Naber

Reputation: 537

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

Upvotes: 8

GOK
GOK

Reputation: 2428

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

Upvotes: 12

Grayson
Grayson

Reputation: 191

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

Upvotes: 1

Maksym Kozlenko
Maksym Kozlenko

Reputation: 10363

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

Upvotes: 17

Related Questions