My challenge involves handling two string values: startTime, which is formatted as 14/03/2022, 17:12:19, and stopTime, which is in the format of 14/03/2022, 17:15:19. The goal is to calculate the difference between these times within an Angular TypeScript file, resulting in an answer of 03:00.
Initially, I attempted using the getTime() method, but it appears not to be available in TypeScript:
calculateDuration(startTime:string,stopTime:string)
{
this.myStartDate = new Date(startTime);
this.myEndDate = new Date(stopTime);
this.diff = this.myEndDate.getTime() - this.myStartDate.getTime();
console.log(this.diff);
}
I also experimented with parsing like this:
calculateDuration(startTime:string,stopTime:string)
{
this.myStartDate = Date.parse(startTime)
this.myEndDate = Date.parse(stopTime);
this.diff = this.myEndDate - this.myStartDate;
console.log(this.diff);
}
However, this approach only yields a result of Nan.
In addition, here is my HTML code snippet:
<div class="jumbotron">
<h1 class="display-4 text-center">Timely Application</h1>
</div>
<div>
<app-table-form></app-table-form>
</div>
<body style="text-align: center;">
<div>
<table class="table" style="margin:1em auto;" >
<thead>
<tr>
<th>Project Name</th>
<th>Start Time</th>
<th>Stop Time</th>
<th>Duration</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let tf of service.listofTime">
<td (click)="changeForm(tf)">{{tf.projectName}}</td>
<td (click)="changeForm(tf)">{{tf.startTime}}</td>
<td (click)="changeForm(tf)">{{tf.stopTime}}</td>
<td (click)="changeForm(tf)">{{tf.duration}}</td>
<td>
<i class="far fa-trash-alt fa-lg text danger" (click)="(onDelete(tf.timeId))"></i>
<button style="margin-left: 40px;" (click)="(calculateDuration(tf.startTime,tf.stopTime))">Calculate duration</button>
</td>
</tr>
</tbody>
</table>
</div>
</body>
Open to any suggestions or solutions!