HTML5, Eingabetyp datetime vs. datetime-local, was soll ich verwenden?

Question

Ich kann keinen weiteren Unterschied wie beim Rückgabewert finden...

"2011-10-18T00:00:00.00Z" // datetime value 

"2011-10-18T00:00:00.00" // datetime-local value

Habe ich etwas verpasst?

Answer 1

Aktualisierung: W3C hinzugefügt type@datetime-local zurück und ließ die Unterstützung für type@datetime - Browser stellen datetime jetzt als normalen Text dar: siehe Warum wird der HTML5-Eingabetyp datetime von Browsern entfernt, die ihn bereits unterstützen?

Alte Antwort als Referenz

Ich hoffe, Sie haben sich nicht für datetime-local . :-)

W3C HTML hat input type@datetime-local fallen gelassen; "wenig unabhängiger Wert und Quelle potenzieller Verwirrung für Entwickler"

Quelle: https://twitter.com/html5/status/433038890937901056

Die Geschichte des Prozesses finden Sie hier: http://encosia.com/setting-the-value-of-a-datetime-local-input-with-javascript/

Es gab einige verwirrende Instabilitäten um datetime Eingaben als HTML5 hat sich zu einer Empfehlung verdichtet.

Zu Beginn schlug die W3c HTML5-Spezifikation lediglich eine datetime Eingabe. Beginnend mit iOS 5, zeigt Mobile Safari eine Benutzeroberfläche für diese Eingabe an, die derjenigen in nativen in nativen Apps zu finden ist. Andere mobile Browser folgten diesem Beispiel schnell.

Später, datetime wurde aus dem HTML5-Spezifikationsentwurf zugunsten von Kombination einzelner Datums- und Zeiteingaben, um den Benutzer zur Eingabe eines Datum/Uhrzeit mit zwei separaten Eingaben abzufragen. Während die Reduzierung der Anzahl von neuen Eingabetypen sinnvoll ist, wird der Nutzen der Anzeige der kombinierten das kombinierte Datum/Uhrzeit-Widget, das bereits vorhanden und vertraut ist auf mobilen Geräten.

Als nächstes wurde die datetime-local-Eingabe in die Spezifikation aufgenommen hinzugefügt, um die Lücke zu ersetzen, die das Entfernen von datetime hinterließ. Die neue Eingabe würde ähnlich wie die alte, aber ohne den Begriff der Zeitzone Versatz.

Ende 2014 beschloss das W3C, datetime-local aus der HTML5-Spezifikation zu streichen, da sie zu Verwirrung führen könnte. Dennoch, die dominierenden mobilen Browser (d.h. Mobile Safari und Chrome) hatten datetime-local bereits implementiert und zu einem De-facto-Standard gemacht. Also lenkte das w3C ein und fügte es wieder in den letzten Empfehlungsentwurf Entwurf.

Um die Verwirrung noch ein wenig zu vergrößern, listet Apple immer noch beide datetime und datetime-local als unterstützte Eingabetypen für iOS 5.0 und später. Das ist jedoch nicht ganz richtig. Seit iOS 7 zeigt Mobile Safari seine native Schnittstelle für datetime-local-Eingaben an und gleichzeitig die Unterstützung für datetime-Eingaben eingestellt. Wie bei jedem Eingabetyp, für den ein Browser keine erweiterte Unterstützung bietet, fielen datetime Eingaben ab iOS 7 wieder zu reinen Textfeldern.

Lange Rede, kurzer Sinn: Sie müssen datetime-local für iOS 7+ verwenden (zumindest bis die aktuelle Version 8.1.3, während ich dies schreibe) und es ist hilfreich zu zu verstehen, dass das "local" bedeutet, dass die Eingabe unabhängig von der Zeitzone ist.

Answer 2

Der Unterschied zwischen den beiden besteht darin, dass die Eingabe datetime-local die Zeitzone nicht enthält. Wenn die Zeitzone für Ihre Anwendung nicht wichtig ist, verwenden Sie datetime-local.

Einige Browser versuchen immer noch, die Datetime-Eingabeform zu verstehen. Firefox 7 hat in diesem Bereich noch keine Fortschritte gemacht. Richten Sie stattdessen Ihre eigenen Felder ein, indem Sie drei Auswahlfelder mit Optionen verwenden, die in Bezug auf das heutige Datum ausgefüllt werden. So haben Sie viel mehr Kontrolle über das Aussehen und das Verhalten, und Sie gehen nicht das Risiko ein, dass viele Ihrer Benutzer nur normale Textfelder sehen und raten müssen, wie sie Informationen in diese Felder eingeben sollen.

Answer 3

Schauen Sie sich die HTML5-Datumseingabefelder bei iOS5 oder bei Google Chrome für Android an, das ist ziemlich cool. Beide haben Unterstützung für die Typen date, datetime, datetime-local, time, month, nur week fehlt. Gerade für mobile/touch Clients ist die Unterstützung der neuen Eingabezeiten sehr wichtig. Für meine Anwendung werde ich je nach Client einen js/html-basierten Kalender (wie dynarch) oder das html5-Eingabefeld anzeigen.

Answer 4

Hier ist eine aktuellere (vom 23. April 2017) und endgültige Antwort (fett gedruckt) von MDN:

<input type="datetime">

Veraltet

Diese Funktion ist veraltet. Auch wenn sie in einigen Browsern noch funktioniert, wird von ihrer Verwendung abgeraten, da sie jederzeit entfernt werden könnte. Versuchen Sie, sie nicht zu verwenden.

Das HTML war ein Steuerelement zur Eingabe von Datum und Uhrzeit (Stunde, Minute, Sekunde und Sekundenbruchteile) sowie einer Zeitzone. Diese Funktion wurde aus WHATWG HTML entfernt und wird von den Browsern nicht mehr unterstützt.

Stattdessen implementieren die Browser den datetime-local-Eingabetyp (und die Entwickler werden aufgefordert, diesen zu verwenden).

Quelle

Answer 5

Der folgende Code zeigt einen Kalender aus einem Eingabefeld in allen Browsern an. Fügen Sie den Code in den Kopf der Seite ein.

<link ref="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>  
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>  
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 

<script type="text/javascript">
$(function() {
    $("#datepicker").datepicker({ dateFormat: "mm-dd-yy" }).val()
});

$('#event_date').datepicker({
    showButtonPanel: true,
    dateFormat: "mm/dd/yy",
    beforeShow: function() {    
        $(".ui-datepicker").css('font-size', 12) 
    }
});
</script>

<style>
div.ui-datepicker, .ui-datepicker input {
    font-size:35%;
    line-height: .6;
}
</style>