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.

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

The input type must be text and not date. This...

<input type="date" />

Should be

<input type="text" />

Otherwise Chrome and Edge will add a datepicker. Instead use a class or id to identify it as datepicker and do something like $(".datepicker").datepicker();