Javascript Zeit verändern

[der henry]

Hallo,

ich möchte ein Eingabefeld für Datum und Uhrzeit erstellen, das aber beim laden mit dem aktuellen Datum und manipulierter Zeit geladen werden soll.

nach dem Laden sollte im input stehen:

-> begin = heutiger Tag, 00:00:00 -> end = heutiger Tag, 23:59:59

	let begin = new Date();
	let end = new Date();
	
	begin.setHours(0);
	begin.setMinutes(0);
	begin.setSeconds(0);
	
	end.setHours(23);
	end.setMinutes(59);
	end.setSeconds(59);
	
	
	document.getElementById('from').valueAsDate = begin;
	document.getElementById('to').valueAsDate = end; 

und in html wird dies hier angezeigt

<td>
<label>VON:<input id="from" type="datetime-local"></label>
</td>
	
<td>
<label>BIS:<input id="to" type="datetime-local"></label>
</td>

Hier habe ich folgende Fragen:

1. Es fehlen 2 Stunden (utc/local) Ich weiß aber nicht woran ich drehen kann/soll ?
2. Kann ich dem input "datetime-local" so formatieren, das keine Sekunden oder gar Millisekunden angezeigt werden ? Nur Stunden und Minuten

Vielen Dank !!

[Rolf B]

Hallo Henry,

laut Spec ist die Zuweisung eines Date-Objekts an valueAsDate für datetime-local Inputs nicht erlaubt, und mein Edge hier erbricht sich auch darüber.

Grund laut MDN: Date-Objekte sind nicht localized. Was gelogen ist, denn ein Date kennt ja seinen Timezone-Offset. Aber das ist ihnen vielleicht nicht local genug (ich sag nur Europe/Busingen...)

Aber ich nehme an, dass es Dir vor allem um ein gemeinsames Date/Time Eingabefeld geht. Das bekommst Du mit datetime-local nicht unbedingt. Soweit ich weiß, hat der Firefox einen Bug und gibt Dir keinen Timepicker.

Das Sekundenproblem habe ich bei mir nicht (im Firefox hatte ich es auch nicht) - welchen Browser verwendest Du?

Die 2 Stunden Differenz klingen nach Localtime/UTC-Time, dein Browser scheint - specwidrig - ein Date für valueAsDate zu akzeptieren, verwendet aber die UTC-Zeit. Könnte man mit setUTCHours() adressieren, aber ich würde das lassen.

Nimm lieber (new Date()).toISOString().substring(0,10) für das Date und pack es in eigene Eingabefelder mit type="date". Ist zwar lästiger, aber portabler, glaub ich.

Oder mein Knoff-Hoff ist wiedermal veraltet.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Aber ich nehme an, dass es Dir vor allem um ein gemeinsames Date/Time Eingabefeld geht. Das bekommst Du mit datetime-local nicht unbedingt. Soweit ich weiß, hat der Firefox einen Bug und gibt Dir keinen Timepicker.

Weiß nicht, ob das ein Bug oder ein Feature ist. Mit der Tastatur die Uhrzeit eingetippt dürfte schneller und einfacher sein als aus einer Auswahlliste rausgepickt. Das Hoch- und Runterzählen mit Pfeiltasten funktioniert auch im Firefox.

Nimm lieber (new Date()).toISOString().substring(0,10) für das Date

Nein, lieber nicht, denn das ist falsch.

🖖 Live long and prosper

[Rolf B]

Hallo Gunnar Bittersmann,

Mit der Tastatur die Uhrzeit eingetippt dürfte schneller und einfacher sein als aus einer Auswahlliste rausgepickt.

Wohl wahr…

(new Date()).toISOString Nein, lieber nicht, denn das ist falsch.

Warum? Es gibt mir das Wallcalendardate im Format yyyy-mm-dd, und genau das muss ich an die value-Eigenschaft zuweisen.

Argh, es liefert UTC, warum ist mir das nicht aufgefallen. Also Intl.DateTimeFormatter, oder von Hand schnitzen.

Oder Temporal.PlainDateISO bzw. PlainDateTimeISO verwenden (mit Polyfill für Opera/Safari). Aber das ist schon etwas lästiger.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Nein, lieber nicht, denn das ist falsch.

Warum? Es gibt mir das Wallcalendardate im Format yyyy-mm-dd, und genau das muss ich an die value-Eigenschaft zuweisen.

Du musst nicht nur das Datum im richtigen Format zuweisen, sondern auch das richtige Datum – und zwar rund um die Uhr.

🖖 Live long and prosper

[Rolf B]

Hallo Gunnar,

ich habe es gemerkt und meinen Beitrag editiert. Ich war nur zu langsam 😉

Rolf

[Gunnar Bittersmann]

@@Rolf B

Also Intl.DateTimeFormatter

Wie kriegt man damit YYYY-MM-DD raus?

Oder Temporal.PlainDateISO bzw. PlainDateTimeISO verwenden

Temporal.Now.plainDateISO("Europe/Berlin") ☞ Fork

Wenn das denn bloß schon in allen relevanten Browsern angekommen wäre.

🖖 Live long and prosper

[Rolf B]

Hallo Gunnar,

Wie kriegt man damit YYYY-MM-DD raus?

Mit dem sv-SE Locale 😜

Einen ISO-String incl. Zeit gibt's damit aber auch nicht.

Und bevor man formatToParts() aufruft, verwendet man besser getFullYear() & Co

Temporal Wenn das denn bloß schon in allen relevanten Browsern angekommen wäre.

Ja, es ist schade, dass Opera das noch nicht unterstützt (flöt 😝)

Anyroad, meine Artikel zu Temporal sind zwar noch in den Babyschuhen, aber einen Link auf einen Polyfill habe ich schon drin. Der sollte nutzbar sein, wenn man im Internet wilde Tiere fotografieren will.

Rolf

[Gunnar Bittersmann]

@@der henry

	let begin = new Date();
	let end = new Date();

Die Objekte werden nicht mehr geändert (nur noch Eigenschaften von diesen), const ist angebracht, nicht let.

	begin.setHours(0);
	begin.setMinutes(0);
	begin.setSeconds(0);

Damit kriegst du Mitternacht lokaler Zeit; für MESZ also 22:00 des Vortags.

	document.getElementById('from').valueAsDate = begin;

Diesen Zeitpunkt verwendest du als Wert, und genau das wird dann auch angezeigt – in UTC. „Eine Sache, die der Eingabetyp datetime-local nicht bietet, ist eine Möglichkeit, die Zeitzone und/oder das Gebietsschema der Datum/Uhrzeit-Steuerung festzulegen. Dies war im Input-Typ datetime verfügbar, aber dieser Typ ist jetzt obsolet und wurde aus der Spezifikation entfernt.“ [MDN]

Stattdessen: die lokale Zeit im Format YYYY-MM-DDTHH:mm als value zuweisen.

Aktuelles Jahr, Monat, Tag in lokaler Zeitzone bekommst du mit

const now = new Date();
const todayString = `${
	now.getFullYear().toString().padStart(4, '0')
}-${
	(now.getMonth() + 1).toString().padStart(2, '0')
}-${
	now.getDate().toString().padStart(2, '0')
}`;

(now.getMonth() + 1) – go home, JavaScript, you’re drunk. Wie so ziemlich alle Programmiersprachen.

	document.getElementById('to').valueAsDate = end; 

Wenn deine Eingabefelder in einem Formular sind und ein name-Attribut haben, dann hast du in JavaScript bereits eine Referenz darauf und musst dir die Elemente nicht aus dem DOM raussuchen.

☞ Codepen

---

<td>
<label>VON:<input id="from" type="datetime-local"></label>
</td>

Dragon, eine Vorlesesoftware von Microsoft, kriegt(e? – haben sie den Bug inzischen gefixt?) es nicht auf die Reihe, bei dieser in HTML vorgesehenen Variante das Label dem Eingabefeld zuzuweisen. Deshalb besser, auch wenn es auch laut Spec nicht nötig wäre, die Zuordnung über das for-Attribut herstellen.

---

2. Kann ich dem input "datetime-local" so formatieren, das keine Sekunden oder gar Millisekunden angezeigt werden ? Nur Stunden und Minuten

Wenn Sekunden und Millisekunden 0 sind, werden sie nicht angezeigt.

Und ganz BTW: du plenkst. Anders als im Französischen steht im Deutschen wie in den meisten Sprachen kein Leerzeichen vorm Fragezeichen.

🖖 Live long and prosper