AngularJS - Parsing ng-model to date/time

Question

Is there any way for Angular to take the string from the date/time inputs? Currently, I have this input, for example:

<input class="admin-input" type="time" ng-model="newEvent.endHour"/>

I'd like to show the value in model as HH:mm but, when I print its value, it shows the full date plus the full time. Is there anyway to get just the string shown in the input (HH:mm format) into the ng-model?

Thanks in advance.

Possible duplicate of How to format the value of input[time] when bound to Date()-object — Heretic Monkey
– Heretic Monkey, Commented Mar 13, 2017 at 19:19
Tried that and still didn't work. Seems that i will have to parse it in the controller, as it also shows 1 day and 1 hour less than those shown in the input — Xabi
– Xabi, Commented Mar 13, 2017 at 19:38

Sajeetharan · Accepted Answer · 2017-03-13 19:41:20Z

2

You can use the angular date filter,

<input class="admin-input" type="time" ng-model="newEvent.endHour | date:'HH:mm'"/>

EDIT If you want to bind it to a model then add a watch and filter it inside the controller,

DEMO

var app = angular.module('App', []);
app.controller('myctrl', function($scope,$filter) {
  $scope.endHour = new Date();
  $scope.$watch('endHour', function(newValue) {
    $scope.endHour = $filter('date')(newValue, 'HH:mm');
  });
});

<!DOCTYPE html>
<html ng-app="App">

<head>
  <script data-require="angular.js@*" data-semver="1.2.14" src="//code.angularjs.org/1.2.14/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<div ng-app="App" ng-controller="myctrl">
  <input type="datetime" ng-model="endHour" class="form-control" />
</div>
</body>

</html>

edited Mar 13, 2017 at 19:41

answered Mar 13, 2017 at 19:18

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Xabi Over a year ago

It seems you can't assign a filter to the ng-model, it doesn't work

Sajeetharan Over a year ago

i would suggest you to do it on the controller unless you are displaying it in expression

Xabi Over a year ago

Still the same, it seems like it will always send the full date in both time and dates: 2017-03-13T23:00:00.000Z (also timezone is incorrect)

Sajeetharan Over a year ago

did you check the demo

Xabi Over a year ago

Yes, I did the same, which also is like this one stackoverflow.com/questions/36976716/…

Collectives™ on Stack Overflow

AngularJS - Parsing ng-model to date/time

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related