Getting Hours and Minutes From Time in Angular

From the last week, I was trying to generate the random time between the range of time. I had tried some of the ways. Here I will share some wrong ways I had used to deal with Time, and the correct way I found.

So let's start,

WRONG WAY 1:
 
When I went to the definition of Time, I find below code: 
export declare type Time = {
    hoursnumber;
    minutesnumber;
};
 
[Note: For Finding the definition keep the cursor in the word and press F12,
 If you get Error: Can't bind to 'ngModel' since it isn't a known property of 'input'. go to StackOverflow ]
 
As I was not able to find any direct methods to get Hours and Minutes from the time. I tried to fetch the hours and time by the below method:
 
app.component.html
<input type="time" [(ngModel)]="time" >
<button (click)="randomGen(time)"> Random Time Generate </button>
app.component.ts
import { Time } from '@angular/common';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-app';
  time:Time;
  randomGen(timeDemo:Time){
    console.log(timeDemo);
    console.log(timeDemo.hours);
    console.log(timeDemo.minutes);
  }
}
Output:
 So As you can see I was getting the value of Hours and Minutes as "undefined".
 
Explanation:
If you see the definition of "Time" more carefully, you will find it is declared as a type. and you cannot treat "Time" as a JSON object, and I was using "Time" as a JSON object.
 
WRONG WAY 2:
 
I have googled and find two methods "getHours()" and "getMinutes", So I tried to use that with Time. Actually, that was only used with the date type but I thought to tried it. So here is my code of using both above methods.
 
Here also you can find two different situations:
 
1. If you declare the type of time in the code, you will get the error as soon as you try to use "getHours()" and "getMinutes()" with time. 
Error: 
Property 'getHours' does not exist on type 'Time'.
Property 'getMinutes' does not exist on type 'Time'

 

 
2. If you do not declare the type in the code. No error will show to you while writing the code. You can see it in the below snap
 

  randomGen(time){
    console.log(time);
    console.log(time.getHours());
    console.log(time.getMinutes());
  }
   
But, While executing you will find the error when you call those lines of code. The first error which Angular finds will show you.
 
Below is the Error:
TypeError: time.getHours is not a function

 
Explanation:
getHours() and getMinutes() are the methods only for "date" type. You cannot use those functions with other data types.
 
Correct Way I found:
So After understanding this, I write the below code( Same "randomGen" Function in the "app.component.ts") to fetch the Hours and Minutes: 
 randomGen(time:Time){
    var timeA:number[]=[];
    console.log(time);
    var timeArrayString= time.toString().split(":", 2);
    for(let item of timeArrayString){
      let no:number=Number(item);
      timeA.push(no)
    }
    console.log("Hours", timeA[0]);
    console.log("Minutes", timeA[1]);
  }

Code Explanation:
 toString()-> to changing the time type to string type,
split()-> to split the string,
Number()-> Cast the values to number type,
push()-> inserting the values to the end of the array
It is showing the result:
You can use this method in JavaScript/TypeScript.
Hope This is Helpful, Thank you.
 

References: https://basarat.gitbook.io/typescript/recap/null-undefined,

 https://stackoverflow.com/questions/31378526/generate-random-date-between-two-dates-and-times-in-javascripthttps://gist.github.com/nick-desteffen/4286260

Add comment