HTML Zeiteingabefeld minimale und maximale Attribute arbeiten nicht für Minuten

Question

So Im Winkel mit einem einfachen Handy-App erstellen und innerhalb eines Abschnitts von html Ich habe dies:

<input id="timeSelected" type="time" min="{{minTimeToPresent}}" max="{{maxTimeToPresent}}" ng-model="date.time" class="time-input" ng-change="checkTheSelectedTime()"/> 

Das ist meine wirklich einfach „Zeitauswahl ist "und es funktioniert wirklich gut, ich habe dynamisch das Element ein Min und Max gegeben, wie Sie sehen können, und das Min und Max funktioniert für den Stundenabschnitt der Zeit und entfernt sogar Stunden, die außerhalb des Bereichs von dem Bildlaufrad liegen in der App (wenn natürlich an einem Telefon getestet), aber aus irgendeinem Grund nicht das gleiche für die Minuten.

Interessanterweise wird meine ng-change-Funktion nicht ausgelöst, wenn Sie eine Zeit wählen, die außerhalb des Bereichs in Bezug auf Minuten ist, also wenn ich ein Maximum von "20:30:00" zum Beispiel und wählen Sie die Zeit "20:31" Die ng-Änderung wird überhaupt nicht ausgelöst, aber wenn ich "20:30" wähle, wird es ausgelöst.

So ist es wirkt, als ob sie die Min- und Max-wissen, aber was ich in erster Linie will, ist für die falschen MINUTEN vom auswählbaren Scrollrad zu entfernen, wie die Stunden.

Bitte helfen, danke!

Weitere Details ...

• Die dynamisch eingestellten Zeiten sind in diesem Format: z.B. "21:30:00"

• Ich setze die Min- und Max-Werte, bevor das DOM geladen wurde, damit ich sicher sein kann, dass die korrekten Werte verwendet werden.

Answer 1

Die einzige Methode, die ich gefunden habe, die benutzerdefinierte dies ohne etwas zu schreiben, erreichen wird ist selbst UI bootstrap Timepicker

Sie mit einem min und max angeben können, und es wird der Benutzer ändert es in der Eingabe beschränken. Es validiert die Eingabe in Echtzeit. Klingt so, als ob das deine Anforderungen sind.

Hier ist eine plunkr Demo von ihrer Website, die ich mit der Min und Max Validierung geändert habe. Sie müssen min und max im Controller-Code im Datumsformat angeben.

HTML

<uib-timepicker ng-model="mytime" ng-change="changed()" hour-step="hstep" minute-step="mstep" show-meridian="ismeridian" max="max" min="min" ></uib-timepicker> 

JS

var d = new Date(); 
d.setHours(2); 
d.setMinutes(30); 
$scope.min = d; 

var d2 = new Date(); 
d2.setHours(11); 
d2.setMinutes(0); 
$scope.max = d2;