Disable native datepicker in Google Chrome

Step-by-Step Guide to Hijack the date fields

Manipulating user interface and replacing the native datepicker in Google Chrome to make it consistent across browsers may sound like a mission impossible. But with our action-packed guide, you'll feel like Ethan Hunt.

1. Hide the Sneaky Indicators

First things first, we need a "disguise" to complete this mission by removing the calendar icon and spinner indicators:

/* CSS Agents working behind the curtains */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-outer-spin-button {
    /* POOF! They're gone. */
    display: none;
}


2. Hide Placeholder in Style

Doing a placeholder visibility trick can be secret sauce for an ultimate customization. So, here it goes:

/* Abracadabra to hide placeholders. */
input[type="date"]::-webkit-input-placeholder {
    /* Vanished into oblivion*/
    visibility: hidden !important;
}


3. Level the Field

Next up is employing some friendly cross-browser allies. Calling the JavaScript-based datepicker like jQuery UI to join in the battle. Modernizr can be our inspector, checking if the browser is friendly or we need to switch tactics:

if (!Modernizr.inputtypes.date) {
    /* Like a reliable backup friend, jQuery UI datepicker comes to rescue if needed */
    $('input[type="date"]').datepicker();
}


Or you can switch your date fields from type=date to type=text, like switching languages to communicate better:

/* changing the language of communication for Chrome */
$('input[type="date"]').attr('type', 'text').datepicker();


Remember, dressing the textbox to look like date input is the key to seamless user experience.

4. Outfit your new UI Hero

Before you set out on a new mission, make sure your custom datepicker is dressed for success:

.custom-datepicker {
    /* Time to get dapper */
}


And call your stylized field to the battlefront:

<input type="date" class="custom-datepicker">


Fine-tuning your datepicker

What separates the good from the great is the attention to detail. Here's how your custom date picker can reign supreme:

Mobile-first:

Cater to the mobile users. A thumb-friendly datepicker ensures a content smile from the users.

Autocomplete & Accessibility:

Input fields must obey the principle of accessibility. Use autocomplete and aria-label to empower users using assistive technologies:

<input type="date" autocomplete="bday" aria-label="Enter your birthday. Cake before entering is optional">


Date Formats - One for All:

You don’t want to preference one user over another. Remember, internationalization is the secret key to include all users' date format preferences.