How to get the hours and minutes from angularjs input-time

Question

I know that I have to use the <input type="time".....> to let the user input the time. But I am desperately in a need to know how to use the values of hours and minutes individually for further processing. I am just finding examples everywhere as to how to just accepting and printing the time as a whole(something like object.value). But I currently need to extract the hours and minutes exclusively for my task at hand. Here is by-far the only type of code which I found.

<!doctype html>
<html lang="en">
<head>
  <title>AngularJS Directives : input[time]</title>
   <script src="angular.js"></script>
   <style>
      b{font-family:Papyrus; color:#fa4b2a; font-size: 20px;} 
  </style>
</head>
<body ng-app="timeDemo">
  <script>
 angular.module('timeDemo', [])
   .controller('timeController', ['$scope', function($scope) {
     $scope.sample = {
       value: new Date(1999, 0, 1, 15, 30, 0)
     };
   }]);
</script>
<form name="demoForm" ng-controller="timeController as timeCtrl">
   <label for="sampleInput">Select a time from 6 am to 6 pm</label>
   <input type="time" id="sampleInput" name="input" ng-model="sample.value"
       placeholder="HH:mm:ss" min="06:00:00" max="18:00:00" required />
  <!-- min 6 am and max 6 pm i.e 18:00 -->
   <div role="alert">
     <span class="error" ng-show="demoForm.input.$error.required">
        Input is Required!</span>
     <!-- Required Error  -->
     <span class="error" ng-show="demoForm.input.$error.time">
       Input Date is  not Valid!</span>
    <!-- Validation Error -->

   </div>
  <i>value = <b>{{sample.value | date: "HH:mm:ss"}}</b></i><br/>
  <i>demoForm.input.$valid = <b>{{demoForm.input.$valid}}</b></i><br/>
  <i>demoForm.input.$error = <b>{{demoForm.input.$error}}</b></i><br/>
  <i>demoForm.$valid = <b>{{demoForm.$valid}}</b></i><br/>
  <i>demoForm.$error.required = <b>{{!!demoForm.$error.required}}</b></i><br/>
</form>
</body>
</html>

Could you please create a runnable example of the code using SO's inbuilt or JSfiddle tool — Vikasdeep Singh
– Vikasdeep Singh, Commented Sep 12, 2018 at 10:40
I am sorry VicJordan. I am not getting a hold of this entire time thing. I just need to know how to use just hours and minutes instead of just displaying the entire thing. — Harshith Rai
– Harshith Rai, Commented Sep 12, 2018 at 10:48

Th3S4mur41 · Accepted Answer · 2018-09-12 10:48:30Z

2

The Date object should return what your are looking for... Just create a new Date object based on your input and use the object's methods. E.g.:

var d = new Date(sample.value);
var hours = d.getHours();
var minutes = d.getMinutes()

See https://www.w3schools.com/jsref/jsref_obj_date.asp for more details

answered Sep 12, 2018 at 10:48

Th3S4mur41

2,3251 gold badge20 silver badges32 bronze badges

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

Collectives™ on Stack Overflow

How to get the hours and minutes from angularjs input-time

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related