CODEWITHSUNDEEP
javascripthtmlangularjsdatetime
RohanSalins
RohanSalins

Reputation: 49

how to pass value to input time tag using ng-model

Hi i am trying to pass value to a input time tag, from javascript - angular JS. Here is the following code.

JS :

$scope.from="09:00:00"
$scope.from="17:00:00"

HTML :

From : <input type="time" ng-model="from" > 
To : <input type="time" ng-model="to" >

No value is getting updated inside input element. what is the mistake in above code?

Here is the Full code :

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

From: <input type="time" ng-model="fromTime"><br>
To: <input type="time" ng-model="toTime"><br>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.fromTime="09:00:00";
    $scope.toTime="17:00:00";
});
</script>

</body>
</html>

Error: [ngModel:datefmt]

Upvotes: 3

Views: 686

Answers (2)

georgeawg
georgeawg

Reputation: 48968

From the Docs:

Error: ngModel:datefmt

Model is not a date object

Description

All date-related inputs like <input type="date"> require the model to be a Date object. If the model is something else, this error will be thrown.

For more information, see

Upvotes: 0

Bill P
Bill P

Reputation: 3618

After angularjs version 1.3, all date related inputs require a model of type Date(). documentation

So you need to change the values to Date objects like this e.g. :

$scope.from= new Date(1970, 0, 1, 09, 0, 0);
$scope.to= new Date(1970, 0, 1, 17, 0, 0);

Check the demo: fiddle

Upvotes: 1

Related Questions