MomentJS - Environment Setup

Advertisements

Previous Page
Next Page  

In this chapter, you will learn in detail about setting up the working environment of MomentJS on your local computer. Before you begin with working on MomentJS, you need to have the access to the library. You can access its files in any of the following methods −

Method 1: Using MomentJS File in Browser

In this method, we are going to need MomentJS file from its official website and will use it directly in the browser.

Step 1

As a first step, go to the official website of MomentJS https://momentjs.comYou will find the home page as shown here −

Setup

Observe that there is a download option available which gives you the latest MomentJS file available. Note that the file is available with and without minification.

Step 2

Now, include moment.js inside the script tag and start working with MomentJS. For this, you can use the code given below −

<script type = "text/JavaScript" src = " https://MomentJS.com/downloads/moment.js"></script>

Given here is a working example and its output for a better understanding −

Example

Live Demo 
<html>
   <head>
      <title>MomentJS - Working Example</title>
      <script type = "text/JavaScript" src = "https://MomentJS.com/downloads/moment.js"></script>
      <style>
         div {
            border: solid 1px #ccc;
            padding:10px;
            font-family: "Segoe UI",Arial,sans-serif;
            width: 50%;
         }
      </style>
   </head>
   <body>
      <div style = "font-size:25px" id = "todaysdate"></div>
      <script type = "text/JavaScript">
         var a = moment().toString();
         document.getElementById("todaysdate").innerHTML = a;
      </script>
   </body>
</html>

Output

The moment-locale file to work with different locales is also available as shown in the screenshot above. Now, add the file to the script tag as shown below and work with different locales of your choice. For this, you can use the code given below −

<script type="text/JavaScript" src="https://MomentJS.com/downloads/moment-with-locales.js"></script>

Given here is a working example for moment-locale and its output for a better understanding −

Live Demo 
<html>
   <head>
      <script type = "text/JavaScript" src ="https://MomentJS.com/downloads/moment-with-locales.js"></script>
   </head>
   <body>
      <h1>Moment Locale</h1>
      <div id = "datedisplay" style = "font-size:30px;"></div>
      <script type = "text/JavaScript">
         var a = moment.locale("fr");
         var c = moment().format("LLLL");
         document.getElementById("datedisplay").innerHTML = c;
      </script>
   </body>
</html>

Output

Method 2: Using Node.js

If you are opting for this method, make sure you have Node.js and npm installed on your system. You can use the following command to install MomentJS −

npm install moment

You can observe the following output once MomentJS is successfully installed −

NodeJs

Now, to test if MomentJS works fine with Node.js, create the file test.js and add the following code to it −

var moment = require('moment');
var a = moment().toString();
console.log(a);

Now, in the command prompt, run the command node test.js as shown in the screenshot given below −

NodeJS Test

Note that this command displays the output for moment().toString().

Method 3: Using Bower

Bower is another method to get the required files for MomentJS. You can use the following command to install MomentJS using Bower −

bower install --save moment

The screenshot given below shows the installation of MomentJS using Bower −

Using Bower

These are the files loaded from Bower for MomentJS to install. The installed moment and locale files are shown in the image given below −

Bower MomentJS
Advertisements