it-swarm.com.de

So erhalten Sie HTML 5-Eingabe type = "date" in Firefox und/oder IE 10

Ich finde es seltsam, dass input type="date" nach all dieser Zeit immer noch nicht in Firefox unterstützt wird. Ich glaube nicht, dass sie (wenn überhaupt) viele neue HTML-5-Typen für ein Eingabeelement hinzugefügt haben. Es überrascht nicht, dass es in IE10 nicht unterstützt wird. Meine Frage ist also ...

Wie kann type="date" auf einem input-Element funktionieren, ohne eine weitere .js-Datei (nämlich jQueryUI DatePicker-Widget) hinzuzufügen, nur um einen Kalender/ein Datum für nur IE und Firefox-Browser zu erhalten? Gibt es etwas, das irgendwo angewendet werden kann (CDN vielleicht?), Das diese Funktion standardmäßig in Firefox und/oder IE Browsern funktionieren lässt? Beim Versuch, auf IE 8+ Browser und für Firefox zu zielen, spielt es keine Rolle, die neueste Version (28.0) ist in Ordnung.

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

185
Solomon Closson

Sie können versuchen, webshims zu verwenden, das unter cdn verfügbar ist. 

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" />

Für den Fall, dass die Standardkonfiguration nicht zufriedenstellend ist, gibt es viele Konfigurationsmöglichkeiten . Hier finden Sie den datepicker Konfigurator .

Hinweis: In der Zukunft gibt es möglicherweise neue Bugfix-Versionen für webshim. Es wird keine größeren Veröffentlichungen mehr geben. Dies beinhaltet die Unterstützung für jQuery 3.0 oder neue Funktionen. 

134

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

Um es zu aktivieren: 

about: config

dom.forms.datetime -> auf true setzen

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

26

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

  1. Include jQuery und jQuery UI-Bibliotheken (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 Ausschnitt 

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

Siehe jQuery UI DatePicker - Datumsformat ändern bei Bedarf.

20
Dax

Der Typ = "Datum" ist an dieser Stelle keine tatsächliche Angabe. Es ist ein Konzept, das Google entwickelt hat und in den Whatwg-Spezifikationen (nicht offiziell) enthalten ist und 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 kann nicht voraussehen, dass dies tatsächlich der Fall ist. 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 ein Anbieter wissen, was mit Ihrer Benutzeroberfläche am besten funktioniert, sagen Sie 400 Pixel, 800 Pixel und 1200 Pixel Breite?

17
Chris Love

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

<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" />
9
drooh

Mozilla erlaubt zwar nicht die Verwendung eines Datepicker-Ui, erlaubt aber die Verwendung von Pattern, so dass Sie zumindest eine Datumsbestätigung mit folgendem Inhalt erhalten:

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 mit @SuperUberDuper darin überein, dass Mozilla bei der nativen Integration weit hinterherhinkt.

4
ajax1515

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

IDs sollten für jedes Feld eindeutig sein. Wenn Sie also in Ihrem Formular (oder Ihren Formularen) mehrere Datumsfelder haben, können Sie anstelle der ID das Klassenelement verwenden:

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

und deine Eingabe als:

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

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

3
codeispoetry

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

3
irfandar

Hier ist die richtige Lösung ... Sie sollten Jquery Datepicker überall verwenden

  <script>
  $( function() {
    $( ".simple_date" ).datepicker();
  } );
  </script>

Unten ist der Link, um den vollständigen Code zu erhalten

https://tutorialvilla.com/how/wie-nach-solve-the-problem-of-html-date-picker

0
santosh devnath

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

  • Sie möchten nicht Jquery verwenden
  • Konflikt von Jquery-Versionen in Ihrem Projekt
  • Wahl des Jahres ist nicht bequem. Zum Beispiel benötigen Sie 120 Klicks auf die vorherige Schaltfläche, um zu 10 Jahren zurückzukehren.

Bitte sehen Sie sich meinen sehr einfachen Cross-Browser-Code für die Datumseingabe an. 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>

0
Andrej

Ich musste bootstrap-datepicker plugin verwenden, damit der Kalender unter Firefox 55 Portable funktioniert:

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

Kompatibel mit Bootstrap v2 und v3. Es wird mit einem eigenständigen Stylesheet geliefert, damit Sie sich nicht auf Bootstrap verlassen müssen.

Verwendungszweck:

<input class="datepicker">

$('.datepicker').datepicker({
    format: 'mm/dd/yyyy'
});
0
Santiago Trejo

Ich danke Alexander, dass ich einen Weg gefunden habe, das Format für en lang zu ändern. (Wußte nicht, welches lang ein solches Format verwendet)

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

 $.webshims.activeLang('en');
0
Pavel Niedoba