momentjs javascript date library tutorials

momentjs javascript date library tutorials

What is MomentJS in javascritpt?

MomentJs is an open-source JavaScript library for manipulating and parsing date objects. Every developer needs to know how to manipulate dates and times during their project development.

JavaScript has a date object, Developer must write a lot of code to manipulate the date and time object and doesn’t have the flexibility to parse and validate the object.

There are a lot of date and time libraries in JavaScript. MomentJS is one of the popular libraries in javascript applications.

Moments library can be used in normal web-based JavaScript/jQuery applications as well as NodeJS/typescript applications.

MomentJS is an agonistic library, and no dependency on any framework can be used in Front end and back-end Javascript applications.

We can configure momentjs in different ways as follows.

Usage of momentjs in script tag of HTML

The most recent library can be downloaded from the momentjs official website or you can use the momentjs CDN url URL in script tags.

<html>
  <head>
    <script src="pathto/moment.js"></script>
    <script>
      moment().format();
    </script>
  </head>
  <body></body>
</html>

Using npm package in nodejs environment

this has an npm package for nodejs applications.

We can use the node package manager or yarn command to install this dependency

npm install moment --save
yarn add moment

Configure momentjs in typescript applications

first, you must install the moment js library using the npm command

In the typescript code, use the below code as like this

import * as a moment from moment ;
let now = moment();

Moving to the next section, We will see various momentjs examples

How to get the Current Date and time in javascript using momentJS

Moment object has an empty constructor which gives the current date and time

<html>
  <head>
    <title>Moment.js Example Current Date and time</title>
  </head>
  <body>
    <H1> javascript example for Current Date and Time </H1>
    <div id="showCurrentDateMomentJs"></div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="lib/moment.js"></script>
    <script>
      var CurrentDateAndTime =
      document.getElementById('showCurrentDateMomentJs'); var
      CurrentDateAndTimeMoment = moment();
      CurrentDateAndTime.innerHTML=CurrentDateAndTimeMoment;
    </script>
  </body>
</html>

And the output is Thu Jul 05, 2018, 12:08:47 GMT+0530

MomentJs Format examples

using the Format method, we can format the date to various formats and also can validate the date.

MomentJS format date examples

The following code returns the date in various formats.

moment().format() - 018-07-11T12:04:35+05:30
moment().format('dd')- Wed
moment().format("MMM Do YYYY") - Jul 11th 2018

format date-time string example

during string format, any characters like hyphen (-) or slash (/) will not be considered

moment("01-12-2018").format("MM/DD/YYY") - 01 - 12 - 2018;

How to check to validate Date in javascript

moments format method used to check passed value is in date format or not using the isValid method

var m = moment("2018-20-08", "YYYY-DD-MM");
m.isValid(); //returns true
var m1 = moment("20-08-2018");
m1.isValid(); // returns false

How to convert UTC to local time using momentJS in javascript?

To enable timezone capabilities, need to add momentJS timezone library

moment.utc().format('YYYY-MM-DD HH:mm:ss')
UTC time is  2018-07-10 16:06:39
  //below code  convert UTC to local timezone
    var currentLocalTime  = moment.utc('2018-07-10 16:06:39').toDate();
    localTimeFromUTC = moment(currentLocalTime).format('YYYY-MM-DD HH:mm:ss');

Your Local Time related to UTC as mentioned above 2018-07-10 21:36:39`.