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:

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