Wie deaktivierst du den Datepicker in Microsoft Edge?

Question

Ich habe mehrere Eingaben mit type = "date" und möchte die Standard-Datumsauswahl in Microsoft Edge deaktivieren, da ich jQuerys Datepicker verwende. Wie deaktiviere ich das mit CSS oder JavaScript? Es funktioniert gut in Chrome und Firefox, aber nicht Edge. Irgendwelche Antworten würden geschätzt werden.

Eine Arbeits 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

Es ist nicht möglich, die native Datepicker Kontrolle zu deaktivieren Funktionalität in Edge (although Chrome can via a hack) - und trotzdem.

Eingabesteuerelemente, sofern nicht vom Browser entworfen, basieren im Allgemeinen auf Systemsteuerelementen. Dies bedeutet, dass ein Eingabedatapicker ein Eingabedatenpicker ist und eine select Dropdown-Liste eine select Dropdown-Liste ist.

Die meisten Steuerelemente sind in Anpassung beschränkt abgesehen von grundlegenden Styling wie Grenzen, Padding und Schriftart und HTML-Standards Attribute z. placeholder.

Sie haben ein paar Optionen:

Lassen Sie den Standardpicker Kontrolle, wie sie ist

Dies ist die Option werde ich empfehlen. Es ist normalerweise die beste Strategie, sich an die Standard-Systemsteuerelemente (+ Styling, wo zutreffend) zu halten. Dies gewährleistet maximale Gerätekompatibilität und Vertrautheit für Ihre Benutzer. Außerdem funktioniert normalerweise alles "einfach".

Es gibt auch weniger Aufwand in Ihrem JS-Code.

Böse Option: die Browser-Erkennung

Sie könnte erkennen, ob der Browser Rand in Ihrem JS-Code ist, und es dann stattdessen die jQuery-Steuerung zu machen sagen. Sie sollten dies vermeiden, es sei denn, Sie benötigen es wirklich, da die Browser-Erkennung veraltet und ein Wartungs-Albtraum ziemlich schnell wird.

Answer 2

Der Eingabetyp muss Text und kein Datum sein. Diese ...

<input type="date" /> 

Sollte

sein

<input type="text" /> 

Ansonsten Chrome und Edge wird eine Datumsauswahl hinzufügen.Verwenden Sie stattdessen eine Klasse oder ID als Datepicker zu identifizieren und etwas zu tun, wie $(".datepicker").datepicker();

Answer 3

Wie bei Cyptic I

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

in Text musste die Art ändern und dann in JQuery

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