Best Ways to convert timestamp to Date format in typescript| Angular timestamp date example

Best Ways to convert timestamp to Date format in typescript| Angular timestamp date example

The timestamp is a Unix timestamp in milliseconds format used to represent a date and time. It denotes the number of milliseconds elapsed since January 1, 1970.

It consists of a 10-digit number, representing the number of seconds elapsed since January 1, 1970, in UTC format.

For example, the timestamp is 1587143959831.

This blog post explains various methods to convert a timestamp to a date format.

The Date object in JavaScript holds date and time information, with an example date format like 25-11-2021 10:06:02.

This post focuses solely on date formats.

You can also refer to my other related post.

Below are different ways to convert a Unix timestamp to a Date format:

  • JavaScript/TypeScript: Convert timestamp to Date format
  • Angular: Convert timestamp to Date
  • Using Moment.js library

As you may already know, you can obtain the current timestamp in JavaScript as demonstrated below:

let currentDate = new Date(); // Example: 2020-04-17T17:19:19.831Z
console.log(currentDate.getTime()); // 1587143959831

Now, let’s consider the Unix timestamp provided in the string

let timestamp = 1587143959831;

How to Convert a Timestamp String to Date Format YYYY-DD-MM in TypeScript

The Date object is an inbuilt feature in JavaScript, providing the toLocaleDateString() method to return a date format based on a given ISO consideration.

In the example below, en-us denotes the USA date format.

const date = new Date(timestamp).toLocaleDateString("en-us");
console.log(date); // 4/17/2020

The same code works in regular JavaScript as well.

How to Convert a Timestamp to Date Format in Angular using Moment.js

Moment.js is a third-party utility library for the manipulation of dates and times in JavaScript applications. It simplifies the conversion process, especially if Moment.js is already integrated into the application.

Here’s an example code snippet:

import * as moment from 'moment';

const date = moment(timestamp).format("L");
console.log(date); // 4/17/2020

Angular Example: Converting Timestamp to Date Object

In Angular applications, there are several methods to achieve this:

  • Using Pipes
  • Writing TypeScript code directly

pipes

Pipes are particularly useful in Angular HTML templates. They enable formatting directly within the template. In the typescript, the timestamp variable is declared with the value.

Here’s the syntax using the date pipe:

{{timestamp | date::dateformat}}

Here, timestamp is of type number, representing milliseconds. The dateformat should be enclosed in single quotes, following a format like YYYY-DD-MM HH: SS.

In the TypeScript component:

import { Component } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  timestamp = 1587143959831;
}

In the HTML template of the component, we use the pipe symbol to filter the date with the specified format:

<div>{{timestamp | date:'dd/MM/yyyy'}}</div>

Output:

17/04/2020

Conclusion

In this example, you’ve learned multiple ways to convert a timestamp to a date format in Angular and TypeScript, demonstrated with clear examples.