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

Just a question, why are you using both `type="date"` and jQuerys datepicker? Isn't the purpose od jQs datepicker to replace the `type="date"`? — Vucko, Oct 02 '15 at 15:30
Well, I'm using `type="date"` so that the system datepickers work on mobile devices. I'm using jQuery's datepicker for desktops and laptops only. — Daniel Harris, Oct 02 '15 at 15:31
But `type="date"` has [bas support](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) ([caniuse](http://caniuse.com/#feat=input-datetime)), even for mobile devices. I'd recommend you to use jQ's datepicker for all devices. — Vucko, Oct 02 '15 at 15:35
Yes, I'm using Modernizr to check if the browser supports input `type="date"` and it reverts back to jQuery datepicker if it doesn't support it. — Daniel Harris, Oct 02 '15 at 15:44
sorry, meant the version with jQuery date picker, that is working in chrome and firefox but not in edge — Patrick, Oct 02 '15 at 18:37

score 2 · Answer 1 · edited May 23 '17 at 12:01

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.

Unfortunately, the Edge date picker just doesn't work. Chrome and Firefox have some decent datepickers, but Edge is just plain awful. It's a shame developers still have to jump through hoops. Saying "just don't use Edge because Edge just doesn't work" to our users doesn't work. — , Jul 01 '16 at 17:11

score 2 · Answer 2 · answered Jul 07 '17 at 12:34

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

answered Jul 07 '17 at 12:34

cryptic'l

43
5

I'm not sure if this answer is out of date now, but I already had "text" as the input type and it still shows the native popup over the top of my jQuery date/time picker when I click the input. – gornvix Nov 14 '20 at 23:44

score 1 · Answer 3 · answered Feb 15 '18 at 09:08

1

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

answered Feb 15 '18 at 09:08

arame3333

9,887
26
122
205

How do you disable the datepicker in Microsoft Edge?

3 Answers3

Linked