'How do you disable the datepicker in Microsoft Edge?

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;   
}
javascripthtmlcssdatepickermicrosoft-edge


Solution 1:[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.

Solution 2:[2]

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();

Solution 3:[3]

As with Cyptic I had to change the type to text

<input type="text" class="datepicker"/>

And then in JQuery

$("input.datepicker:text").datepicker({
    showOn: "both",
    dateFormat: "dd MM yy",
    changeMonth: true,
    changeYear: true
});

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Community
Solution 2 cryptic'l
Solution 3 arame3333

Related Questions