Angular Time validation does not appear to be working in 1.3?

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:-

Demo

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());
});

Demo

Answered By – PSL

Answer Checked By – David Goodson (AngularFixing Volunteer)