9
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
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
Share on Facebook
Share on Twitter
Share on Reddit
Share on LinkedinPlease also mark the comments that contributed to the solution of the article
Content-Key: 1200787147
Url: https://administrator.de/contentid/1200787147
Printed on: April 24, 2024 at 22:04 o'clock
9 Comments
Latest comment
https://jsfiddle.net/g1mdusve/
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/step
<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()" /> 
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
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
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.
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
@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.
So ein Auswahl-Fenster hat nicht jeder Browser ... Firefox bspw. nicht das musst du hier auch berücksichtigen ...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.
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>
