How do you disable the datepicker in Microsoft Edge?

Question

I have several inputs with type="date" and want to disable the default date picker in Microsoft Edge since I'm using jQuery's datepicker. How do I disable this using CSS or JavaScript? It works fine in Chrome and Firefox but not Edge. Any answers would be appreciated.

A working jsFiddle

HTML

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>

<input type="date">

JS

$(document).ready(function() {
    if (!Modernizr.inputtypes.date || $(window).width() >= 900) {
        $('input[type=date]').datepicker();
    }
});

$(window).resize(function() {
    if (!Modernizr.inputtypes.date || $(window).width() >= 900) {
        $('input[type=date]').datepicker();             
    }
    else {
        $('input[type=date]').datepicker("destroy");
    }
});

CSS

input[type=date]::-webkit-inner-spin-button, input[type=date]::-webkit-calendar-picker-indicator  {
    display: none;
    -webkit-appearance: none;   
}

Answer 1

It is not possible to disable the native datepicker control functionality in Edge (although Chrome can via a hack)- yet anyway.

Input controls, unless designed by the browser are generally based on/are system controls. This means an input datepicker is an input datepicker, and a select drop down list is a select drop down list.

Most controls are limited in customisation apart from basic styling like borders, padding and font styling, and HTML-standards attributes e.g. placeholder.

You have a couple of options:

Leave the default datepicker control as-is

This is the option I will recommend. Sticking with the default system controls (+ styling where applicable) is usually the best policy. This ensures maximum device compatibility, and familiarity for your users. Plus, everything normally 'just works'.

There is also less overhead in your JS code.

Evil Option: Browser Detection

You could detect if the browser is Edge in your JS code, and then tell it to render the jQuery control instead. You should avoid this unless you really need it, as browser detection becomes out-of-date and a maintenance nightmare pretty quick.