Das Element input type"time" in 15min Schritten verstellen

Guten Tag,

ich würde gerne wissen, ob es möglich ist bei einem input Element des Typs "time" die Minuten nur in 15min Schritten zu verstellen. Also es kann nur 7:00, 7:15, 7:30... eingestellt werden können und es sollen auch nur diese angezeigt werden (kein 01, 02,....).
Wenn es mit JavaScript oder PHP realisiert werden könnt wäre das klasse.

Lg Worker

Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben

Content-ID: 1200787147

Url: https://administrator.de/contentid/1200787147

Ausgedruckt am: 19.11.2024 um 11:11 Uhr

9 Kommentare

Neuester Kommentar

https://jsfiddle.net/g1mdusve/

<input id="timeinput" type="time" step="900" value="08:00" disabled /><input type="button" value="<" onclick="document.getElementById('timeinput').stepDown()" /><input type="button" value=">" onClick="document.getElementById('timeinput').stepUp()" />  

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/step

Zitat von @Worker26:

ich würde gerne wissen, ob es möglich ist bei einem input Element des Typs "time" die Minuten nur in 15min Schritten zu verstellen.

Wie wäre es mit dem Attribut step, wie in der aktuellen Spezifikation beschrieben?

Hallo,

danke für die Antworten

@149062 das ist ein guter Ansatz, jedoch möchte ich keine extra Buttons haben, bei denen ich klicken muss in 15min Steps, sondern wenn ich das Time Fenster öffne, sollen mir nur 00,15,30 und 45 (im Minutenbereich) angezeigt werden.
Es ist mühselig immer in 15 Minutenschritten durchzuklicken, bis man die Zeit erreicht hat, welche man möchte.
Lg

Habe ich das richtig verstanden, wenn ich step="900" eingebe und ich stelle 07:12 ein, dann wird es auf 07:15 gerundet wenn ich es z.B. in eine Datenbank schreibe?
Lg

Okay, hab es mit step verstanden, es wird dann einfach angezeigt was der nächste gültige Wert ist.
Das ist schon nicht schlecht. So wie ich es mir gedacht habe funktioniert dann wahrscheinlich nicht.

Zitat von @Worker26:

Hallo,

danke für die Antworten

So ein Auswahl-Fenster hat nicht jeder Browser ... Firefox bspw. nicht das musst du hier auch berücksichtigen ...
Alternativ baust du ein im onChange Event des Input-Felds ein JavaScript ein und rundest dort den Wert auf die nächsten 15 Minuten.

@149062 Okay, dann versuche ich es so. Danke

Bsp.

<!doctype html>
<html>
<head>
<meta charset="utf-8">  
</head>
<script type="text/javascript">  
function steptime(obj){
	var hours = parseInt((obj.value.split(":")),0);  
	var minutes = Math.ceil((parseInt(obj.value.split(":")[1]) / 15)) * 15;  
	if (minutes > 45){
		minutes = 0;
		hours = (hours < 23) ? hours + 1 : 0;
	}
	obj.value = [hours.toString().padStart(2,"0"),minutes.toString().padStart(2,"0")].join(":");  
}
</script>
<body>
<input id="timeinput" type="time" step="900" value="08:00" onChange="steptime(this)" />  
</body>
</html>