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

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

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.

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

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 .

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?

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

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.

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 ...

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

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

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>

Hier ist die richtige Lösung. Sie sollten jquery datepicker überall verwenden

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

Unten finden Sie den Link, um den vollständigen Code zu erhalten

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

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

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

<!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>