Issue
I have a simple set of code:
<div ng-app="myApp">
<div ng-controller="test">
{{time}}<br>
<input ng-model="time" type="time" placeholder="HH:mm" min="08:00" max="17:00" required>
</div>
</div>
It is available to execute from here: http://jsfiddle.net/U3pVM/9824/
This JSFiddle is using 1.3.0.beta 17
If I change the Fiddle to the 1.3 release, it sees every time as invalid.
(If the time is valid, it appears above the data entry box.)
Any thoughts on what is wrong with this validation?
Solution
It probably is how input type time validation is implemented in angular. So in your case your input exceeds max
limit (during parser validation for max value) because of the date that you are providing. i.e new Date()
which is the current date. When you have max
value specified as 17:00
angular converts this to ISO date format for its validation (Which is weird for validating time), i.e it converts it as
Epoch date i.e it would become 1970-01-01T17:00:00.00000Z
and it compares the time to see if it exceeds. You can test that out by providing max as valid ISO date-time format.
Example:-
If you do not specify any date part, input type time’s ng-model needs the exact date of the Epoch
(i.e 1 January 1970
). It outputs as the specified time with date 1/1/1970
.
If you really use time and set value in DOM directly elm.valueAsDate = new Date(2014, 1, 1, 7, 34);
the element’s HTML5 property (elm.validity
) returns valid as true, so this is definitely with angular implementation.
So in your case try setting the time as:-
Example:-
app.controller('MainCtrl', function($scope) {
var dt = new Date();
$scope.time = new Date(1970,0,1,dt.getHours(),dt.getMinutes(),dt.getSeconds());
});
Answered By – PSL
Answer Checked By – David Goodson (AngularFixing Volunteer)