CODEWITHSUNDEEP
javascripthtmlangularjsdatetimepicker
Marox
Marox

Reputation: 359

How to get only time value in Angular controller variable from html input type="time"

I have html input:

 <input type="time" id="exampleInput" name="input" ng-model="ctrl.time"
               placeholder="HH:mm:ss" min="00:00:00" max="24:00:00" required />

From my input, I'm getting something like this into my 'ctrl.time':

"1970-01-01T02:04:00.000Z"

but I expect only time like: 14:03:00

Is there a solution to make the data being formatted before it goes to Angular variable or to format it inside ?

Thank You in advance for your answer.

Upvotes: 1

Views: 1821

Answers (1)

Max Sorin
Max Sorin

Reputation: 1052

var app = angular.module('plunker', []); 

app.controller('main', function($scope) {
  $scope.ctrl = {};
  $scope.show = function(){
    console.log( $scope.ctrl.time);
    console.log(moment($scope.ctrl.time).format('HH:mm:ss'));
  };
});
<html>
  <head>
    <script data-require="moment.js@*" data-semver="2.10.2" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>    
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>    
  </head>

  <body ng-app="plunker" ng-controller="main">
    <input type="time" id="exampleInput" name="input" 
          ng-model="ctrl.time" 
          ng-change="show()" 
          placeholder="HH:mm:ss" min="00:00:00" max="24:00:00" required="" />
    
  </body>
</html>

Upvotes: 2

Related Questions