Manipulating Server returned dates at client Side in Angular

Reading Time: 2 minutes

Hey Visitor, Have you ever faced an issue with the date values on your website, when the date and time returned from server doesn’t change according to the client timezone , for eg. values returned from server at US will be different for a client at India so we need to manipulate the received time according to Indian Time Zone.

So recently, I encountered this issue in my project in displaying time in the correct format on the required time zone.

Handling date/time when dealing with time-zones is a tedious task.

As a developer, getting date from server then converting, comparing and displaying date and time might get tricky on front-end side.

So the best solution for this is use of a library called –

Moment.js

Moment.js is a Javascript library for parsing, validating, manipulating, formatting and displaying dates and times.

It’s easy documentation also makes it the first choice for the developers.

---

Integrate moment.js with Angular

INSTALL           

npm install moment –save                        # npm

yarn add moment                                           # Yarn

Install-Package Moment.js                            # NuGet

spm install moment –save                            # spm

meteor add momentjs:moment                   # meteor

IMPORT

(in the component  app.component.ts and in the component to be used)

import * as moment from ‘moment’;

Now you can now use Moment.js in your entire Angular app, as long as you import it into the component in which you plan to use it

Here I will show how to get local time if you have a utc date time string.

Lets say you have a UTC date-time string as 2014-02-19 05:24:32 AM and you want to convert utc time to local time  then use following :

 utcDateTime: any;

this.utcDateTime =“19 June 2011 13:23 “;

 let local_date = moment.utc(this.utcDateTime).local().format(‘YYYY-MM-DD HH:mm:ss a’);

Output: 2011-06-19 18:53:00 pm

let local_date = moment.utc(this.utcDateTime).local().format(‘MMMM DD, LT’);

Output: June 19, 6:53 PM

There are multiple manipulation’s and formats under moment.js which can be referred to it’s documentation at this link .

we will discuss it’s detailed features further …

---

---