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 …
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
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.
@kritika that’s fine, we can have a 1to1 discussion for this
Reblogged this on sangeetagulia.