Find the length of time in Typescript (measured in hours, minutes, and seconds)

Trying to calculate the duration between two dates in TypeScript (Angular): 2021-11-19 21:59:59 and 2021-11-19 22:00:18

let startDate: Date = new Date(start);
  let endDate: Date = new Date(end);
  if(end != null) {
    let duration = new Date(endDate.getTime() - startDate.getTime());
    return duration.getHours() + ":" +  duration.getMinutes() + ":" + duration.getSeconds();
  } else {
    return "";
  }

However, the resulting time is incorrect: 1:0:19.

I am aiming for 00:00:19

EDIT

Tried the following but the result remains incorrect: 01:00:19

const datepipe: DatePipe = new DatePipe('en-US')
let formattedDate = datepipe.transform(duration, 'HH:mm:ss')
angulartypescript

Answer №1

To retrieve the time value of a date, you can utilize the toLocaleTimeString() function which will specifically return the time based on the region. For more information, refer to the documentation.

To implement this in your code, simply modify the return statement as follows:

return duration.toLocaleTimeString([], {
   timeZone: 'UTC',
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Function was expected to call toggleStyle spy, but it did not

Currently, I am implementing Jasmine testing for my project. Below is the function that I am working with: style: string; toggleStyle(style: string, version: string) { this.style = `mapbox://styles/mapbox/${style}-${version}`; } Accompanied by th ...

javascriptangularkarma-jasmineistanbul

Looking to conceal the input div without compromising the functionality in Angular 14

Here is the provided HTML code for scanning a barcoder and assigning it to the barCodeNumber variable. The onChange() function will be called once the barcode is scanned. Question: How can I hide the div on the UI while still allowing the function to work ...

javascriptangulartypescriptprimeng

Receiving a reply from the axios function

Whenever I try to call the lookUpItem function from ItemSearch.vue, I always get an undefined response. Code snippet from ItemSearch.vue: <script setup lang="ts"> import { lookUpItem } from '../systemApi' async fu ...

javascripttypescriptvuejs3

Using TypeScript to create a generic type that wraps around HTMLElements

I attempted to execute this action, however the assignment to this.element is not working and I am unsure why. class Elem<T> { public element : T; constructor(typeElement:string){ this.element = document.createElement(typeElement); ...

genericstypescript

Issue regarding custom CSS implementation in Angular project

Being a French speaker, I apologize in advance for any mistakes I might make. I am also fairly new to Angular, so if you could provide detailed explanations in your responses, it would be greatly appreciated. Thank you. I am trying to import a custom CSS ...

htmlcssangulartypescript

Tips on downloading an image using the URL in nestjs

I'm trying to retrieve a link and save the associated image in the static folder, but I seem to be encountering some issues with my code. Here's what I have so far: @Injectable() export class FilesService { createFileFromUrl(url: string) { t ...

javascriptnode.jstypescriptnestjs

Formatting numbers in Angular 4 to display in Million or Thousand format

I need assistance with formatting numbers in my Angular 4 application. I want to display the number in a certain format based on its value. For example, if the number is 12.23 million, it should be displayed as 12.2M (with one decimal place). If the numbe ...

angularangular-pipe

Is there a way to position the Image component from next/image using absolute positioning?

Is it possible to use an element Image from 'next/image' with the CSS style { position: absolute; left: 50% }? It appears that it is not being applied. For example: import React from 'react' import Image from 'next/image' imp ...

reactjstypescriptnext.jsstyled-componentsnextjs-image

Choose historical dates with the dl-date-time-picker component within an Angular application

In my Angular 7 project, I have integrated a datetimepicker component called dl-date-time-picker. I want to prevent users from selecting previous dates in the date and time picker. Although I tried using the [selectFilter] attribute for this purpose, it en ...

angulardatepickerangular7bootstrap-datetimepicker

Ways to create a unified component from two similar but distinct components by assigning a value

Upon reviewing my menu setup, I realized that the submenus in my project are essentially the same component with only a single index differentiating them. In order to simplify the structure, I am looking to consolidate these components into one. HTML < ...

angular

Loop through JSON results in Ionic using Angular

I am struggling to retrieve data from a JSON file in Object format using Typescript. When I try to fetch the data from the API, it doesn't display as expected. Typescript this.http.get('http://example.com/api') .subscribe((data) => { ...

jsonangulartypescriptionic-frameworkionic4

Different methods to prompt TypeScript to deduce the type

Consider the following code snippet: function Foo(num: number) { switch (num) { case 0: return { type: "Quz", str: 'string', } as const; case 1: return { type: "Bar", 1: 'value' } as const; default: thr ...

typescript

How can you deduce the type from a different property in Typescript?

I have encountered obstacles in my development process and need assistance overcoming them. Currently, I am trying to configure TObject.props to only accept 'href' or 'download' if the condition TObject.name = 'a' is met, and ...

javascriptreactjstypescripttypes

Tips for integrating and utilizing the MSAL (Microsoft Authentication Library for JavaScript) effectively in a TypeScript-based React single page application

Issue I'm encountering difficulties importing the MSAL library into my TypeScript code. I am using the MSAL for JS library with typings in a basic TypeScript/React project created using create-react-app with react-typescript scripts. As someone who i ...

javascripttypescripttypescript-typingsazure-ad-msal

Encountering Errors while executing the yarn build or tsc commands

Whenever I attempt to build a project or run the yarn tsc command, I encounter various types of errors. This seems to be due to them being installed in the incorrect location. But what could be causing this issue? Feel free to ask for more details if nee ...

reactjstypescriptbuildtsc

Creating Test Cases for Service Response Validation

I am currently attempting to unit test an API within my ngOnInit method. The method is responsible for making a call to the service in order to fetch details. If the details are not undefined, an array called 'shoeDataResponse' of type *shoeData ...

javascriptangulartypescriptunit-testingfrontend

Angular 8 - Unraveling the Mystery Behind its Initial Page Discovery

I am facing an issue with my Angular 8 application where the login page is being displayed at startup. I have checked the routing module but couldn't find anything that explicitly sets this page as the startup page. Any suggestions on what might be c ...

angular

Angular Universal is experiencing difficulties resolving dependencies

After finally migrating my existing Angular project from v8 to v13.0.0, I decided to incorporate SSR into it. The process of updating the project itself was time-consuming and challenging. Once the app successfully ran on v13.0.0, I attempted to add SSR b ...

node.jsangularnpmangular-universal

The type definition file for '@wdio/globals/types' is nowhere to be found

I'm currently utilizing the webdriverio mocha framework with typescript. @wdio/cli": "^7.25.0" NodeJs v16.13.2 NPM V8.1.2 Encountering the following error in tsconfig.json JSON schema for the TypeScript compiler's configuration fi ...

typescriptwebdriver-iowdio

I am having trouble initializing npm due to an error

I am currently working on a Node.js project but I am having trouble starting Node.js. In my existing Angular project, and after creating a new project with the following commands: sudo npm install -g @angular/cli After that, run: ng new mean-angular5 ...

node.jsangularmongodbnpm