Weisen Sie Javascript-Datum der html5 datetime-local-Eingabe zu

DOM:

<input id="myTextbox" type="datetime-local" />

Javascript (jQuery):

$('#myTextbox').val(new Date().toISOString());

Funktioniert nicht. Das Format der Eingabe[type=datetime-local] soll ISO 8601 sein, was Date.toISOString() von Javascript zurückgibt.

Leider haben die vorherigen Antworten für mich nicht richtig funktioniert, da sie vorschlagen, die UTC-Zeit als meine Ortszeit zu betrachten (was im Allgemeinen falsch ist).

Zum Beispiel, wenn meine Ortszeit ist 2021-03-10T01:50:55+0200Dann date.toISOString() kehrt zurück 2021-03-09T23:50:55Zalso kann ich nicht einfach schneiden Z am Ende, denn für datetime-local Ich brauche lokale Datetime 2021-03-10T01:50:55NICHT 2021-03-09T23:50:55.

Der feste Code wäre also folgender:

const d = new Date();
const dateTimeLocalValue = (new Date(d.getTime() - d.getTimezoneOffset() * 60000).toISOString()).slice(0, -1);
$('#myTextbox').val(dateTimeLocalValue);

Deshalb funktioniert es: Wir verwenden immer noch den Trick, das abschließende “Z” aus dem UTC-Zeitformat zu entfernen, aber bevor wir dies tun, verschieben wir die Zeit um unseren Zeitzonen-Offset (Rückgabe um date.getTimezoneOffset() in Minuten) in Rückwärtsrichtung. Danach liefert die verschobene Zeit, konvertiert in UTC, dasselbe Datum und dieselbe Uhrzeit wie unsere lokale. Tatsächlich ist die verschobene Zeit natürlich ein anderer Moment, aber es ist uns egal, sobald das Datum und die Uhrzeit in UTC mit unserem Datum und der Uhrzeit in der lokalen Zeitzone übereinstimmen.

Mit dem obigen Beispiel funktioniert es folgendermaßen:

1. lokale Zeit um Zeitzonen-Offset in die entgegengesetzte Richtung verschieben (z. B. wenn es UTC + 2 war, dann machen wir noch weiter von UTC): 2021-03-10T01:50:55+0200 -> 2021-03-10T03:50:55+0200 (von - date.getTimezoneOffset() * 60000weil 1 Minute 60000 Millisekunden sind)
2. Rückgabe von Datums- und Zeitwerten durch Konvertierung in UTC: 2021-03-10T03:50:55+0200 -> 2021-03-10T01:50:55Z (von .toISOString())
3. nachlaufend entfernen Z um echte Ortszeit mit dem geeigneten Format zu erhalten <input type="datetime-local"> (von .slice(0, -1))

Wenn jemand eine Rücktransformation benötigt, vom Eingabewert zum js-Datum, müssen wir nur die gleichen Schritte in umgekehrter Reihenfolge ausführen:

const dateTimeLocalValue = $('#myTextbox').val();
const fakeUtcTime = new Date(`${dateTimeLocalValue}Z`);
const d = new Date(fakeUtcTime.getTime() + fakeUtcTime.getTimezoneOffset() * 60000);
console.log(d);

Fragen sind willkommen)

Aktualisieren: Diese Antwort kann das Datum basierend auf Ihrer lokalen Zeitzone und Tageszeit falsch einstellen (um einen Tag abweichen). Eine Erklärung und eine korrekte Lösung finden Sie in der Antwort von Maxim.

—

http://www.w3schools.com/jsref/jsref_toisostring.asp:

Die Methode toISOString() wandelt ein Date-Objekt unter Verwendung des ISO-Standards in einen String um.

Der Standard heißt ISO-8601 und das Format ist: YYYY-MM-DDTHH:mm:ss.sssZ

Während ISO 8601 eine gewisse Flexibilität bietet, ist das Format von javascript’s Date’s toISOString() genau wie oben gezeigt.

Das „Z“ am Ende bedeutet, dass es sich um ein UTC-Datum handelt. Diese Darstellung enthält also Zeitzoneninformationen. (Javascript-Daten sind natürlich in UTC-Zeit, da sie intern als Millisekunden seit der Epoche dargestellt werden.)

Das Format der HTML5-Eingabe mit type=datetime-local muss …

Die folgenden Teile, in genau der folgenden Reihenfolge:

• Ein Treffen.
• Die Literalzeichenfolge “T”.
• Eine Zeit.

Beispiel:

1985-04-12T23:20:50.52

1996-12-19T16:39:57

http://www.w3.org/TR/html-markup/input.datetime-local.html

Dies ist immer noch ISO 8601, aber strenger und erlaubt keine Angabe einer Zeitzone.

Glücklicherweise ist das Entfernen der Zeitzone so einfach wie das Entfernen des nachgestellten „Z“.

var isoStr = new Date().toISOString();
$('#myTextbox').val(isoStr.substring(0,isoStr.length-1));

Date.toLocaleString kann den Trick für Sie tun:

$('#myTextbox').val(new Date().toLocaleString("sv-SE", {
    year: "numeric",
    month: "2-digit",
    day: "2-digit",
    hour: "2-digit",
    minute: "2-digit",
    second: "2-digit"
}).replace(" ", "T"));

Dies funktioniert auch in Browsern, die dies nicht unterstützen datatime-local wie Firefox-Desktop und Safari-Desktop.

Weitere Informationen zu datumsbezogenen Eingaben in js-Datumskonvertierungen finden Sie unter Das Artikel, den ich zum Thema geschrieben habe.

Verwenden $('#myTextbox')[0].valueAsNumber = new Date().getTime().

HTMLInputElement Schnittstelle hat auch valueAsDate Eigentum, aber type=datetime-local unterstützt es leider nicht.

https://html.spec.whatwg.org/C/#input-type-attr-summary

Bei mir geht es so:

const d = new Date()
element.value = `${d.toLocaleDateString().split("/").reverse().join("-")} ${d.toLocaleTimeString()}`