Manipulating Server returned dates at client Side in Angular

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 …


knoldus-advt-sticker


 

Written by 

Kritika Khandelwal is a Software Consultant. She has good knowledge of various programming languages like C ,Java and Scala. She also has interests in web development languages like Angular,HTML, JavaScript, CSS etc. She is always eager to learn new and advance concepts in order to expand her horizon and apply them in project development with her existing knowledge. Her hobbies includes reading novels,watching movies and playing badminton.

4 thoughts on “Manipulating Server returned dates at client Side in Angular

  1. Hi Kritika, if you are using moment.js just only for converting UTC time to client-side timezone, then it is really not required you can convert between them without using this (moment.js), it will even make your application heavy

    1. Hi @sourabh , Thanks for your time , and FYI we are not just using it for conversion but for various human friendly formats and few manipulations too, it is just to demonstrate on this post we are showing the integration and conversion part of moment.js as it supports i18n (internationalization) and l10n (localization) so is best for conversion, also i’ll surely discuss it’s bundle of available options in futher posts.

Leave a Reply

%d bloggers like this: