Disable native datepicker in Google Chrome

html google-chrome datepicker
Alexandre picture Alexandre · Jul 4, 2012 · Viewed 98.7k times · Source

Date picker landed on Chrome 20, is there any attribute to disable it? My entire system uses jQuery UI datepicker and it's crossbrowser, so, I want to disable Chrome native datepicker. Is there any tag attribute?

Answer

Yacine Zalouani picture Yacine Zalouani · Sep 4, 2012

To hide the arrow:

input::-webkit-calendar-picker-indicator{
    display: none;
}

And to hide the prompt:

input[type="date"]::-webkit-input-placeholder{ 
    visibility: hidden !important;
}

Related questions

Hide scroll bar, but while still being able to scroll

I want to be able to scroll through the whole page, but without the scrollbar being shown. In Google Chrome it's: ::-webkit-scrollbar { display: none; } But Mozilla Firefox and Internet Explorer don't seem to work like that. I also tried this …

Read More
Disabling Chrome Autofill

I have been running into issues with the chrome autofill behavior on several forms. The fields in the form all have very common and accurate names, such as "email", "name", or "password", and they also have autocomplete="off" set. The …

Read More
How do I load an HTML page in a <div> using JavaScript?

I want home.html to load in <div id="content">. <div id="topBar"> <a href ="#" onclick="load_home()"> HOME </a> </div> <div id ="content"> </div> <…

Read More