Wednesday, July 11, 2018

momentjs javascript date library tutorials

javascript Date momentJS parsing basics

 Momentjs is opensource JavaScript library for manipulating and parsing date objects.  Every developer needs to know how to manipulate date and time during their project development.
JavaScript has a date object, Developer must write a lot of code to manipulate date and time object and don’t have flexibilities to parse and validate object. There are a lot of date and time libraries in JavaScript. MomentJS is one of the popular library  in javascript applications.
Moments library can be used in normal web-based JavaScript/jQuery application as well as NodeJS/typescript 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 momentjs official website or you can use  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 npm package for nodejs applications. We can use node package manager command to install project dependencies

npm install moment

Configure momentjs in typescript applications


first you must install moment js library using npm command
In the typescript code, use below code as like this

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


Moving to next section, We will see various  momentjs examples 


How to get Current Date and time in javascript using momentJS


Moment object has a empty constructor which gives 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 output is Thu Jul 05 2018 12:08:47 GMT+0530

MomentJs Format examples

using Format method, we can do format the date to various formats and also can validate 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 hypen (-) or slash (/) will not considered
 

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


Date valid check using format

momentjs format method used to check passed value is in date format or not using 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 time to local time using momentJS 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

Related article