So funktioniert HTML 5-Eingabetyp = "Datum" in Firefox und / oder IE 10

191

Ich finde es seltsam, dass input type="date"Firefox nach all dieser Zeit immer noch nicht unterstützt wird. Tatsächlich glaube ich nicht, dass sie viel (wenn überhaupt) der neuen HTML 5-Typen zu einem Eingabeelement hinzugefügt haben. Kein Wunder, dass es in IE10 nicht unterstützt wird. Meine Frage ist also ...

Wie kann man type="date"ein inputElement zum Laufen bringen, ohne eine weitere .js-Datei (nämlich jQueryUIDatePicker Widget) hinzuzufügen, um einen Kalender / ein Datum nur für IE- und Firefox-Browser zu erhalten? Gibt es da draußen etwas, das irgendwo angewendet werden kann (CDN vielleicht?), Damit diese Funktionalität in Firefox- und / oder IE-Browsern standardmäßig funktioniert? Der Versuch, auf IE 8+ Browser und für Firefox abzuzielen, spielt keine Rolle, die neueste Version (28.0) ist in Ordnung.

UPDATE: Firefox 57+ unterstützt den Eingabetyp = Datum

Solomon Closson
quelle
29
Scheint mir lächerlich, dass Firefox dies immer noch nicht unterstützt. Ich habe heute von Chrome zu Firefox gewechselt, nur für einen Tag / eine Woche, um zu sehen, was heutzutage passiert, und das hat mich sofort dazu gebracht, zurück zu wechseln!
Codemonkey
19
Es ist ein Witz, dass FF kein Datum hat
SuperUberDuper
6
Aus diesem Grund bin ich verärgert, wenn Leute sagen, dass Firefox der beste Browser ist.
Martin Braun
1
Obwohl es sich nicht um eine Polyfüllung handelt, habe ich nur pickaday verwendet , eine einfache js lib ohne jquery oder andere Abhängigkeiten ...
mb21
2
Scheint in Firefox 57 standardmäßig zu funktionieren. Trotzdem!
Antoine Pinsard

Antworten:

138

Sie können Webshims ausprobieren , die auf cdn + verfügbar sind. die nur, wenn sie benötigt wird.

Hier ist eine Demo mit CDN: http://jsfiddle.net/trixta/BMEc9/

<!-- cdn for modernizr, if you haven't included it already -->
<script src="http://cdn.jsdelivr.net/webshim/1.12.4/extras/modernizr-custom.js"></script>
<!-- polyfiller file to detect and load polyfills -->
<script src="http://cdn.jsdelivr.net/webshim/1.12.4/polyfiller.js"></script>
<script>
  webshims.setOptions('waitReady', false);
  webshims.setOptions('forms-ext', {types: 'date'});
  webshims.polyfill('forms forms-ext');
</script>

<input type="date" />

Falls die Standardkonfiguration nicht erfüllt, gibt es viele Möglichkeiten, sie zu konfigurieren . Hier finden Sie den Datepicker-Konfigurator .

Hinweis: Möglicherweise gibt es in Zukunft neue Bugfix-Versionen für Webshim. Es wird keine größeren Veröffentlichungen mehr geben. Dies umfasst die Unterstützung von jQuery 3.0 oder neuen Funktionen.

Alexander Farkas
quelle
Dies ist eine schöne Lösung, die Konfiguration ist umfangreich, aber ich kann nicht finden, wo das Datumsformat wie "JJJJ / MM / TT" eingestellt werden soll
Pavel Niedoba
14
Ich erhalte die Fehlermeldung "Zugriff verweigert", wenn ich versuche, diese jsfiddle in IE 11 auszuführen, und die Datumsauswahl funktioniert nicht.
Shavais
4
Dies funktioniert nicht auf IE10 ... Ich erhalte den gleichen Fehler wie von @Shavais erwähnt ... um es zum Laufen zu bringen, aktualisieren Sie die JQuery-Version auf 1.11 oder höher. Versuchen Sie diesen Link
Nitin
2
Leider wird die Unterstützung der Webshims für das kommende Jquery 3 nicht erfolgen, wie auf der Website des Autors angegeben. In diesem Fall würde ich mich auf eine gute und alte Jquery-Benutzeroberfläche verlassen.
Marionmaiden
1
Dies funktioniert definitiv in Firefox. Funktionierte aber nicht in IE
Varuni NR
27

Es befindet sich seit Version 51 (26. Januar 2017) in Firefox, ist jedoch (noch) nicht standardmäßig aktiviert.

So aktivieren Sie es:

about: config

dom.forms.datetime -> auf true setzen

https://developer.mozilla.org/en-US/Firefox/Experimental_features

Jonathan Vanasse
quelle
Froh das zu hören. Sollte standardmäßig imo aktiviert sein. Aber das ist gut zu wissen.
Solomon Closson
Ich bin auf FF 64.0.2, aber obwohl diese Option "true" (on) ist, funktioniert sie nicht, das Feld datetime ist immer noch nur Text. Ich habe versucht, den "Timepicker" auch ohne Erfolg zu aktivieren.
Wasted_Coder
20

Es gibt eine einfache Möglichkeit, diese Einschränkung mithilfe der von jQuery bereitgestellten datePicker- Komponente aufzuheben .

  1. JQuery- und jQuery-UI-Bibliotheken einschließen (ich verwende immer noch eine alte)

    • src = "js / jquery-1.7.2.js"
    • src = "js / jquery-ui-1.7.2.js"
  2. Verwenden Sie den folgenden Snip

    $(function() {
         $( "#id_of_the_component" ).datepicker({ dateFormat: 'yy-mm-dd'}); 
    });

Siehe jQuery UI DatePicker - Ändern Sie bei Bedarf das Datumsformat .

Dax
quelle
8
OP sagt "Arbeiten ohne Hinzufügen einer weiteren .js-Datei (nämlich jQueryUI DatePicker Widget)" ... aber diese Frage ist Googles Top-Hit, sodass Ihre Antwort in der Tat SEHR hilfreich ist, obwohl sie die Frage nicht beantwortet. Ich wünschte, ich müsste mich jetzt nicht schlecht fühlen, wenn ich Ihren Beitrag positiv bewertet hätte.
Phil294
2
Sie müssen auch jQuery UI CSS einbinden, damit der Kalender richtig angezeigt wird. <br> <link rel = "stylesheet" href = "// code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
YuAn Shaolin Maculelê Lai
16

Der Typ = "Datum" ist zu diesem Zeitpunkt keine tatsächliche Spezifikation. Es ist ein Konzept, das Google entwickelt hat und das in den Whatwg-Spezifikationen (nicht offiziell) enthalten ist und das nur teilweise von Chrome unterstützt wird.

http://caniuse.com/#search=date

Ich würde mich an dieser Stelle nicht auf diesen Eingabetyp verlassen. Es wäre schön zu haben, aber ich sehe nicht voraus, dass dieser es tatsächlich schafft. Der Hauptgrund ist, dass der Browser zu stark belastet wird, um die beste Benutzeroberfläche für eine etwas komplizierte Eingabe zu ermitteln. Denken Sie aus einer reaktionsschnellen Perspektive darüber nach, wie würde einer der Anbieter wissen, was mit Ihrer Benutzeroberfläche bei 400 Pixel, 800 Pixel und 1200 Pixel Breite am besten funktioniert?

Chris Love
quelle
138
Ich stimme nicht zu, Browser sollten klug genug sein, um dies herauszufinden. Ich bin wirklich müde, die Datumsauswahl da draußen zu benutzen und sie ständig aktualisieren zu müssen.
SuperUberDuper
49
Seltsame Argumentation. Zu viel Belastung für die Browser, aber nicht für Joe Web Developer?!?
Jeroenh
35
Dies ist jetzt Teil des HTML 5-Arbeitsentwurfs: w3.org/html/wg/drafts/html/master/…
Chris
7
Auch ich freue mich über jeden neuen Eingabetyp. Sie sind besser definiert und nativ, was normalerweise schnell bedeutet.
Tomáš Zato - Wiedereinsetzung Monica
5
@ MM Danke. HTML 5 wurde inzwischen auf eine offizielle W3C-Empfehlung aktualisiert. Der neue Link ist w3.org/TR/2014/REC-html5-20141028/…
Chris
9

Hier ist ein vollständiges Beispiel mit dem in JJJJ-MM-TT formatierten Datum

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script> 
<script src="//cdn.jsdelivr.net/webshim/1.14.5/polyfiller.js"></script>
<script>
webshims.setOptions('forms-ext', {types: 'date'});
webshims.polyfill('forms forms-ext');
$.webshims.formcfg = {
en: {
    dFormat: '-',
    dateSigns: '-',
    patterns: {
        d: "yy-mm-dd"
    }
}
};
</script>
<input type="date" />
drooh
quelle
1
Weiß jemand, ob dies die Möglichkeit bietet, auch eine Zeitauswahl hinzuzufügen?
Drooh
Ich habe Ihr Skript in JSFiddle @Drooh ausprobiert, aber es funktioniert nicht. Jedes Mal, wenn ich ein Datum auswähle, erscheint es wie eine Millisekunde im Eingabefeld und verschwindet dann. Kann jemand eine funktionierende Geigenversion mit einer Datumskonfiguration TT / MM / JJJJ bereitstellen?
Ryan Coolwebs
Beachten Sie, dass Webshim ab August 2016 nicht mit jQuery 3 funktioniert und in meinen Tests auch nicht mit 2.2.4.
Drooh
Ich habe festgestellt, dass dies die beste Lösung ist, bis Firefox ein Datum hinzufügt. Stackoverflow.com/questions/2528706/…
drooh
4

Während dies nicht erlaubt, eine Datepicker-Benutzeroberfläche zu erhalten, erlaubt Mozilla die Verwendung von Mustern, so dass Sie zumindest eine Datumsüberprüfung mit so etwas erhalten können:

pattern='(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))'

Letztendlich stimme ich @SuperUberDuper darin zu, dass Mozilla weit davon entfernt ist, dies nativ einzubeziehen.

ajax1515
quelle
1
Gibt es eine Version für "Zeit"?
Malcolm Salvador
1
Bitte erweitern Sie dieses Beispiel. Ist dies ein HTML-Attribut für die Eingabe?
Wasted_Coder
3

Dies ist nur ein Vorschlag, der Dax 'Antwort folgt. (Ich würde es in einen Kommentar zu dieser Antwort einfügen, aber ich habe noch nicht genug Ruf, um andere Fragen zu kommentieren).

IDs sollten für jedes Feld eindeutig sein. Wenn Ihr Formular (oder Ihre Formulare) mehrere Datumsfelder enthält, können Sie das Klassenelement anstelle der ID verwenden:

 $(function() { $( ".datepicker" ).datepicker({ dateFormat: 'yy-mm-dd' }); });

und Ihre Eingabe als:

 <input type="text" class="datepicker" name="your-name" />

Fügen Sie jetzt jedes Mal, wenn Sie die Datumsauswahl benötigen, diese Klasse hinzu. PS Ich weiß, du musst immer noch das js :( verwenden, aber zumindest bist du für all deine Seite eingestellt. Meine 2 Cent ...

Codeispoetrie
quelle
3

Die neueste Version von Firefox, Firefox 57 (Quantum), unterstützt das Datum und andere Funktionen, die am 14. November 2017 veröffentlicht wurden. Sie können sie herunterladen, indem Sie auf diesen Link klicken

irfandar
quelle
0

Danke Alexander, ich habe einen Weg gefunden, wie ich das Format für en lang ändern kann. (Wusste nicht, welche Sprache ein solches Format verwendet)

 $.webshims.formcfg = {
        en: {
            dFormat: '/',
            dateSigns: '/',
            patterns: {
                d: "yy/mm/dd"
            }
        }
     };

 $.webshims.activeLang('en');
Pavel Niedoba
quelle
Ich denke, das einzige Land, das dieses Format verwendet, ist Kanada. In jedem Fall ist 'en' mehrdeutig, da es auch die Vereinigten Staaten einschließt, die ein ziemlich spezielles 'spezielles' Datumsformat haben.
Michael Scheper
In meinem Fall geht es darum, das Datumsformat für jedes Client-Gebietsschema zu überschreiben, das auf Client-Workstations unterschiedlich sein kann. Auf einer bestimmten Seite möchte ich jedoch dieses Datumsformat verwenden (aus Gründen des Kopierens und Einfügens). Es ist eher ein Kommentar für die Antwort von Alexander Farkas, aber ich habe ihn als separate Antwort angegeben, da ich keinen Code in den Kommentar einfügen kann. Ich verwende dies seit mehr als einem Jahr in der Produktionsumgebung.
Pavel Niedoba
Achtung. Wenn Webshims auf der Browserinterpretation des Gebietsschemas beruht, können unvorhersehbare Ergebnisse erzielt werden. 'en' bedeutet wahrscheinlich nicht dasselbe Format auf verschiedenen Plattformen (abhängig vom Gebietsschema des Systems) oder sogar in verschiedenen Browsern. Es kann von einem Browser in Kanada als "en-ca" interpretiert werden (was höchstwahrscheinlich JJJJ-MM-TT ist, aber möglicherweise nicht konsistent), aber von einem Browser in Indien (wie der größte Teil der Welt) als "en-in" würde TT-MM-JJJJ produzieren). Nur weil es im Produktionscode enthalten ist, heißt das nicht, dass es ordnungsgemäß getestet wurde. Selbst auf großen Websites gibt es viele i18n-Fehler im Produktionscode.
Michael Scheper
Die letzte Zeile $ .webshims.activeLang ('en'); sollte lang (oder locale) dazu zwingen, Webshims zu verwenden, die die Browsereinstellungen überschreiben, damit das Format immer gleich ist.
Pavel Niedoba
0

Manchmal möchten Sie Datepicker http://jqueryui.com/datepicker/ nicht in Ihrem Projekt verwenden, weil:

  • Sie möchten jquery nicht verwenden
  • Konflikt der Abfrageversionen in Ihrem Projekt
  • Die Wahl des Jahres ist nicht bequem. Zum Beispiel benötigen Sie 120 Klicks auf die Schaltfläche "Zurück", um zu "Vor 10 Jahren" zu wechseln.

Bitte beachten Sie meinen sehr einfachen Cross-Browser-Code für die Datumseingabe. Mein Code gilt nur, wenn Ihr Browser die Eingabe des Datumstyps nicht unterstützt

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Input Key Filter Test</title>
	<meta name="author" content="Andrej Hristoliubov [email protected]">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	
	<!-- For compatibility of IE browser with audio element in the beep() function.
	https://www.modern.ie/en-us/performance/how-to-use-x-ua-compatible -->
	<meta http-equiv="X-UA-Compatible" content="IE=9"/>
	
	<link rel="stylesheet" href="https://rawgit.com/anhr/InputKeyFilter/master/InputKeyFilter.css" type="text/css">		
	<script type="text/javascript" src="https://rawgit.com/anhr/InputKeyFilter/master/Common.js"></script>
	<script type="text/javascript" src="https://rawgit.com/anhr/InputKeyFilter/master/InputKeyFilter.js"></script>
	
</head>
<body>
	<h1>Date field</h1>
    Date:
    <input type='date' id='date' />
    New date: <span id="NewDate"></span>
    <script>
        CreateDateFilter('date', {
                formatMessage: 'Please type date %s'
                , onblur: function (target) {
                    if (target.value == target.defaultValue)
                        return;
                    document.getElementById('NewDate').innerHTML = target.value;
                }
                , min: new Date((new Date().getFullYear() - 10).toString()).toISOString().match(/^(.*)T.*$/i)[1]//'2006-06-27'//10 years ago
                , max: new Date().toISOString().match(/^(.*)T.*$/i)[1]//"2016-06-27" //Current date
                , dateLimitMessage: 'Please type date between "%min" and "%max"'
            }
        );
    </script>

</body>
</html>

Andrej
quelle
3
Dieser Code schlägt vollständig fehl. Ich kann kein Datum eingeben, da das Feld bereits mit "JJJ-MM-TT" gefüllt ist. Wenn ich versuche, es zu löschen, wird es erneut angezeigt.
Stephen R
Bitte löschen Sie keine Bindestriche. Ich habe erfolgreich in Windows 10 Google Chrome 52, Firefox 41, Opera 39, Microsoft Edge, IE 11 getestet. Bitte teilen Sie mir Ihr Gerät, Betriebssystem und Browser mit.
Andrej
Ich drücke gerade auf den Link "Run Code Snippet" direkt unter Ihrem Kommentar. Ich kann ein Datum nicht richtig eingeben, da der Platzhalter "JJJJ-MM-TT" aktiv mit mir konkurriert und nicht verschwindet, wenn ich mit der Eingabe beginne. Ich verwende den neuesten Firefox unter Windows 10.
Stephen R
1
Beantwortet keine Frage, da dies gegen die Bedingung verstößt, keine externen JS-Dateien hinzuzufügen, und der Code selbst ist völlig unintuitiv zu verwenden. Erzwingt das ISO-Format für Personen, auch wenn es nicht das native Datumsformat ist. Sie können kein neues Datum eingeben, wenn die Eingabemaske erneut angezeigt wird. Sie können die Eingabemaske nicht überschreiben, da es sich nicht um eine Maske handelt, sondern um den tatsächlichen Text im Feld. Sie müssen die Maske als löschen du tippst. Nicht besser als eine Standardeingabe mit Regex-Validierung
MikeT
-1

Hier ist die perfekte Lösung. Sie sollten JQuery datepicker verwenden, um das Datum einzugeben. Es ist sehr einfach zu bedienen und verfügt über viele Funktionen, die das HTML-Eingabedatum nicht bietet.

Klicken Sie hier, um den JQuery-Datepicker-Code zu kopieren

Santosh Devnath
quelle
-1

Ich musste das bootstrap-datepickerPlugin verwenden, damit der Kalender auf Firefox 55 Portable funktioniert:

https://bootstrap-datepicker.readthedocs.io/en/latest/

Kompatibel mit Bootstrap v2 und v3. Es wird mit einem eigenständigen Stylesheet geliefert, sodass Sie nicht auf Bootstrap angewiesen sind.

Verwendung:

<input class="datepicker">

$('.datepicker').datepicker({
    format: 'mm/dd/yyyy'
});
Santiago beendet SO
quelle
-2
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#datepicker" ).datepicker();
  });
  </script>
</head>
<body>

<p>Date: <input type="text" id="datepicker"></p>


</body>
</html>
WAYSER
quelle