Post
Ask Question

JavaScript - Date And Time Library Moment.JS

Introduction

 
Many times, while developing an application, we require the date or time values in a proper format. So, later on, valuable insights can be extracted based on the date & time data. During the earlier times of web programming, in date & time fields, whether used in date of birth field, joining date, hiring date, or any sort of date or time input field, a plain text input was used where the user was guided to input the date in a specific format. This was the time when date or time picker were not used. Even at the start of date or time picker usage, many applications required the user to input correct date or time format. 
 
The simple reason for that is that there was no such library available that can automatically adjust the format of date or time as input is being received from the user. Mostly formatting adjustment of date or time is handled at the server side. Then comes Moment.JS client-side date & time manipulating or formatting library.
 
 
Today, I shall demonstrate some of the features that Moment.JS library offers mainly in manipulating and adjusting date or time formats.
 
Prerequisites
 
Following are some prerequisites before you proceed further in this tutorial,
  1. Knowledge of HTML.
  2. Knowledge of JavaScript.
  3. Knowledge of Bootstrap.
You can download the complete source code for this tutorial or you can follow the step by step discussion below. The sample code is developed in plain HTML.
 
Let's begin now.
 
Step 1
 
Create a plain "datetime-format.html" HTML file and replace the following code in it i.e.
  1. <!DOCTYPE html>    
  2. <html>    
  3. <head>    
  4.     <meta charset="utf-8" />    
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">    
  6.     <title>Moment.JS - Date Time Format</title>    
  7.     <link rel="stylesheet" href="Style/bootstrap.css" />    
  8.     <link rel="stylesheet" href="Style/Site.css" />    
  9.     <script type="text/javascript" src="Scripts/modernizr-2.6.2.js"></script>    
  10.     
  11.     <!-- Font Awesome -->    
  12.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />    
  13. </head>    
  14. <body>    
  15.     <div class="navbar navbar-inverse navbar-fixed-top">    
  16.         <div class="container">    
  17.             <div class="navbar-header">    
  18.                 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">    
  19.                     <span class="icon-bar"></span>    
  20.                     <span class="icon-bar"></span>    
  21.                     <span class="icon-bar"></span>    
  22.                 </button>    
  23.             </div>    
  24.         </div>    
  25.     </div>    
  26.     <div class="container body-content">    
  27.         <div class="row">    
  28.             <div class="panel-heading">    
  29.                 <div class="col-md-8  custom-heading3">    
  30.                     <h3>    
  31.                         <i class="fa fa-calendar"></i>    
  32.                         <span>Moment.JS - Date Time Format</span>    
  33.                     </h3>    
  34.                 </div>    
  35.             </div>    
  36.         </div>    
  37.             
  38.         <div class="row">    
  39.             <section class="col-md-12 col-md-push-0">    
  40.                 <div class="row">    
  41.                     <div class="col-xs-12 col-xs-push-2">    
  42.                         <!-- Moment.JS -->    
  43.                         <div class="well bs-component">    
  44.                             <b><span id="defaultFormatId" class="col-xs-6"></span></b> <span class="col-xs-4"> // Default value of Date & time. </span><br /><br />    
  45.                                 
  46.                             <b><span id="dateFormatId1" class="col-xs-6"></span></b> <span class="col-xs-4"> // Date format-1. </span><br />    
  47.                             <b><span id="dateFormatId2" class="col-xs-6"></span></b> <span class="col-xs-4"> // Date format-2. </span><br />    
  48.                             <b><span id="dateFormatId3" class="col-xs-6"></span></b> <span class="col-xs-4">  // Date format-3. </span><br /><br />    
  49.                                 
  50.                             <b><span id="dayFormatId1" class="col-xs-6"></span></b> <span class="col-xs-4"> // Day of week in number. </span><br />    
  51.                             <b><span id="dayFormatId2" class="col-xs-6"></span></b> <span class="col-xs-4"> // Day of week format-1. </span><br />    
  52.                             <b><span id="dayFormatId3" class="col-xs-6"></span></b> <span class="col-xs-4"> // Day of week format-2. </span><br />    
  53.                             <b><span id="dayFormatId4" class="col-xs-6"></span></b> <span class="col-xs-4"> // Day of week format-3. </span><br /><br />    
  54.                                 
  55.                             <b><span id="monthFormatId1" class="col-xs-6"></span></b> <span class="col-xs-4"> // Month format-1. </span><br />    
  56.                             <b><span id="monthFormatId2" class="col-xs-6"></span></b> <span class="col-xs-4"> // Month format-2. </span><br />    
  57.                             <b><span id="monthFormatId3" class="col-xs-6"></span></b> <span class="col-xs-4"> // Month format-3. </span><br /><br />    
  58.                                 
  59.                             <b><span id="timeFormatId1" class="col-xs-6"></span></b> <span class="col-xs-4"> // Time in 24-hour format. </span><br />    
  60.                             <b><span id="timeFormatId2" class="col-xs-6"></span></b> <span class="col-xs-4"> // Time in 12-hour format-1. </span><br />    
  61.                             <b><span id="timeFormatId3" class="col-xs-6"></span></b> <span class="col-xs-4"> // Time in 12-hour format-2. </span><br /><br />    
  62.                                 
  63.                             <b><span id="yearOnlyFormatId" class="col-xs-6"></span></b> <span class="col-xs-4"> // Year only. </span>    
  64.                         </div>    
  65.                     </div><!-- /.col -->    
  66.                 </div>    
  67.             </section>    
  68.         </div>    
  69.             
  70.         <hr />    
  71.             
  72.         <footer>    
  73.             <center>    
  74.                 <p><strong>Copyright © <span id="copyrightYearId"></span> - <a href="http://www.asmak9.com/">Asma's Blog</a>.</strong> All rights reserved.</p>    
  75.             </center>    
  76.         </footer>    
  77.     </div>    
  78.     
  79.     <script type="text/javascript" src="Scripts/jquery-1.10.2.js"></script>    
  80.     <script type="text/javascript" src="Scripts/bootstrap.js"></script>    
  81.     <script type="text/javascript" src="Scripts/respond.js"></script>    
  82.     
  83.     <!-- Moment.JS-->    
  84.     <script type="text/javascript" src="http://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>    
  85.         
  86.     <script type="text/javascript">    
  87.         // Initialization.    
  88.         var defaultFormatVal = moment();    
  89.             
  90.         var dateFormatVal1 = moment().format('DD-MMM-YYYY');    
  91.         var dateFormatVal2 = moment().format('dddd, DD MMMM YYYY [at] hh:mm:ss A [O\'Clock]');          
  92.         var dateFormatVal3 = moment().format('MMMM Do YYYY');    
  93.                     
  94.         var dayFormatVal1 = moment().format('d');                   
  95.         var dayFormatVal2 = moment().format('dd');                  
  96.         var dayFormatVal3 = moment().format('ddd');                         
  97.         var dayFormatVal4 = moment().format('dddd');        
  98.                                         
  99.         var monthFormatVal1 = moment().format('MM');                                            
  100.         var monthFormatVal2 = moment().format('MMM');                                                   
  101.         var monthFormatVal3 = moment().format('MMMM');    
  102.             
  103.         var timeFormatVal1 = moment().format('hh:mm:ss');    
  104.         var timeFormatVal2 = moment().format('hh:mm:ss A');    
  105.         var timeFormatVal3 = moment().format('hh:mm:ss a');     
  106.                         
  107.         var yearOnlyVal = moment().format('YYYY');    
  108.             
  109.         // Setting Copyright Year.    
  110.         document.getElementById('copyrightYearId').innerHTML = yearOnlyVal;    
  111.             
  112.         // Date Time Format settings.    
  113.         document.getElementById('defaultFormatId').innerHTML = defaultFormatVal;    
  114.             
  115.         document.getElementById('dateFormatId1').innerHTML = dateFormatVal1;    
  116.         document.getElementById('dateFormatId2').innerHTML = dateFormatVal2;    
  117.         document.getElementById('dateFormatId3').innerHTML = dateFormatVal3;    
  118.             
  119.         document.getElementById('dayFormatId1').innerHTML = dayFormatVal1;    
  120.         document.getElementById('dayFormatId2').innerHTML = dayFormatVal2;    
  121.         document.getElementById('dayFormatId3').innerHTML = dayFormatVal3;    
  122.         document.getElementById('dayFormatId4').innerHTML = dayFormatVal4;    
  123.             
  124.         document.getElementById('monthFormatId1').innerHTML = monthFormatVal1;    
  125.         document.getElementById('monthFormatId2').innerHTML = monthFormatVal2;    
  126.         document.getElementById('monthFormatId3').innerHTML = monthFormatVal3;    
  127.             
  128.         document.getElementById('timeFormatId1').innerHTML = timeFormatVal1;    
  129.         document.getElementById('timeFormatId2').innerHTML = timeFormatVal2;    
  130.         document.getElementById('timeFormatId3').innerHTML = timeFormatVal3;    
  131.             
  132.         document.getElementById('yearOnlyFormatId').innerHTML = yearOnlyVal;    
  133.     </script>    
  134. </body>    
  135. </html>   
In the above code, I have used different formats of date & time in combination with Moment.JS library. Let's have a look into them i.e.
 
For the following default format by moment.js library i.e.
 
 
I have used the following code i.e.
  1. var defaultFormatVal = moment();   
For the following format i.e.
 
 
I have used the following line of code i.e.
  1. var dateFormatVal1 = moment().format('DD-MMM-YYYY');   
For the following format i.e.
 
 
I have used the following code i.e.
  1. var dateFormatVal2 = moment().format('dddd, DD MMMM YYYY [at] hh:mm:ss A [O\'Clock]');   
Notice in the above code that in order to use a sentence or word inside the format I can use that within square brackets ([]).
 
For different display variation in the day of the week i.e.
 
 
I have used the following piece of code i.e.
  1. var dayFormatVal1 = moment().format('d');                   
  2. var dayFormatVal2 = moment().format('dd');                  
  3. var dayFormatVal3 = moment().format('ddd');                         
  4. var dayFormatVal4 = moment().format('dddd');   
For different display variations of the month i.e.
 
 
I have used the following code i.e.
  1. var monthFormatVal1 = moment().format('MM');                                            
  2. var monthFormatVal2 = moment().format('MMM');                                                   
  3. var monthFormatVal3 = moment().format('MMMM');  
For a time in 24-hour format i.e.
 
 
I have used the following piece of code i.e.
  1. var timeFormatVal1 = moment().format('hh:mm:ss');   
For a time in 12-hour format i.e.
 
 
I have used the following code i.e.
  1. var timeFormatVal2 = moment().format('hh:mm:ss A');    
  2. var timeFormatVal3 = moment().format('hh:mm:ss a'); 
To display only year format i.e.
 
 
I have used the following line of code i.e.
  1. var yearOnlyVal = moment().format('YYYY');   
Step 2
 
Now, when you open the "datetime-format.html" HTML file in any browser, you will be able to see following (of course date & time will be updated) i.e. 
 
 
Step 3
 
Now create a new plain HTML file "datetime-manipulation.html" and replace following code in it i.e.
  1. <!DOCTYPE html>    
  2. <html>    
  3. <head>    
  4.     <meta charset="utf-8" />    
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">    
  6.     <title>Moment.JS - Date Time Manipulation</title>    
  7.     <link rel="stylesheet" href="Style/bootstrap.css" />    
  8.     <link rel="stylesheet" href="Style/Site.css" />    
  9.     <script type="text/javascript" src="Scripts/modernizr-2.6.2.js"></script>    
  10.     
  11.     <!-- Font Awesome -->    
  12.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />    
  13. </head>    
  14. <body>    
  15.     <div class="navbar navbar-inverse navbar-fixed-top">    
  16.         <div class="container">    
  17.             <div class="navbar-header">    
  18.                 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">    
  19.                     <span class="icon-bar"></span>    
  20.                     <span class="icon-bar"></span>    
  21.                     <span class="icon-bar"></span>    
  22.                 </button>    
  23.             </div>    
  24.         </div>    
  25.     </div>    
  26.     <div class="container body-content">    
  27.         <div class="row">    
  28.             <div class="panel-heading">    
  29.                 <div class="col-md-8  custom-heading3">    
  30.                     <h3>    
  31.                         <i class="fa fa-calendar"></i>    
  32.                         <span>Moment.JS - Date Time Manipulation</span>    
  33.                     </h3>    
  34.                 </div>    
  35.             </div>    
  36.         </div>    
  37.             
  38.         <div class="row">    
  39.             <section class="col-md-12 col-md-push-0">    
  40.                 <div class="row">    
  41.                     <div class="col-xs-12 col-xs-push-2">    
  42.                         <!-- Moment.JS -->    
  43.                         <div class="well bs-component">                                
  44.                             <b><span id="manipulationId1" class="col-xs-6"></span></b> <span class="col-xs-4"> // Number of years from current year till 2015. </span><br /><br />    
  45.                                 
  46.                             <b><span id="manipulationId2" class="col-xs-6"></span></b> <span class="col-xs-4"> // Start of the month. </span><br />    
  47.                             <b><span id="manipulationId3" class="col-xs-6"></span></b> <span class="col-xs-4">  // Start of the year. </span><br /><br />    
  48.                                 
  49.                             <b><span id="manipulationId4" class="col-xs-6"></span></b> <span class="col-xs-4"> // End of the month. </span><br />    
  50.                             <b><span id="manipulationId5" class="col-xs-6"></span></b> <span class="col-xs-4"> // End of the year. </span><br /><br />    
  51.                                 
  52.                             <b><span id="manipulationId6" class="col-xs-6"></span></b> <span class="col-xs-4"> // Last 7 days. </span><br />    
  53.                             <b><span id="manipulationId7" class="col-xs-6"></span></b> <span class="col-xs-4"> // Last 30 days. </span><br /><br />    
  54.                                 
  55.                             <b><span id="manipulationId8" class="col-xs-6"></span></b> <span class="col-xs-4"> // Start of this month. </span><br />    
  56.                             <b><span id="manipulationId9" class="col-xs-6"></span></b> <span class="col-xs-4"> // End of this month. </span><br />    
  57.                             <b><span id="manipulationId10" class="col-xs-6"></span></b> <span class="col-xs-4"> // Last month. </span><br /><br />    
  58.                                 
  59.                             <b><span id="manipulationId11" class="col-xs-6"></span></b> <span class="col-xs-4"> // Next 7 days. </span><br />    
  60.                             <b><span id="manipulationId12" class="col-xs-6"></span></b> <span class="col-xs-4"> // Next 30 days. </span><br />                         
  61.                         </div>    
  62.                     </div><!-- /.col -->    
  63.                 </div>    
  64.             </section>    
  65.         </div>    
  66.             
  67.         <hr />    
  68.             
  69.         <footer>    
  70.             <center>    
  71.                 <p><strong>Copyright © <span id="copyrightYearId"></span> - <a href="http://www.asmak9.com/">Asma's Blog</a>.</strong> All rights reserved.</p>    
  72.             </center>    
  73.         </footer>    
  74.     </div>    
  75.     
  76.     <script type="text/javascript" src="Scripts/jquery-1.10.2.js"></script>    
  77.     <script type="text/javascript" src="Scripts/bootstrap.js"></script>    
  78.     <script type="text/javascript" src="Scripts/respond.js"></script>    
  79.     
  80.     <!-- Moment.JS-->    
  81.     <script type="text/javascript" src="http://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>    
  82.         
  83.     <script type="text/javascript">    
  84.         // Initialization.          
  85.         var manipulationVal1 = moment('2015', 'YYYY').fromNow();    
  86.             
  87.         var manipulationVal2 = moment('2017-06-01').startOf('month').format('dddd, DD-MMM-YYYY');    
  88.         var manipulationVal3 = moment('2018-03-15').startOf('year').format('dddd, DD-MMM-YYYY');            
  89.                     
  90.         var manipulationVal4 = moment('2017-06-01').endOf('month').format('dddd, DD-MMM-YYYY');    
  91.         var manipulationVal5 = moment('2018-03-15').endOf('year').format('dddd, DD-MMM-YYYY');          
  92.                                                 
  93.         var manipulationVal6 = moment().subtract(7, 'days').format('dddd, DD-MMM-YYYY');    
  94.         var manipulationVal7 = moment().subtract(30, 'days').format('dddd, DD-MMM-YYYY');    
  95.             
  96.         var manipulationVal8 = moment().startOf('month').format('dddd, DD-MMM-YYYY');    
  97.         var manipulationVal9 = moment().endOf('month').format('dddd, DD-MMM-YYYY');    
  98.         var manipulationVal10 = moment().subtract(1, 'month').startOf('month').format('dddd, DD-MMM-YYYY');    
  99.             
  100.         var manipulationVal11 = moment().add(7, 'days').format('dddd, DD-MMM-YYYY');    
  101.         var manipulationVal12 = moment().add(30, 'days').format('dddd, DD-MMM-YYYY');    
  102.                         
  103.         var yearOnlyVal = moment().format('YYYY');    
  104.             
  105.         // Setting Copyright Year.    
  106.         document.getElementById('copyrightYearId').innerHTML = yearOnlyVal;    
  107.             
  108.         // Date Time Format settings.    
  109.         document.getElementById('manipulationId1').innerHTML = manipulationVal1;    
  110.             
  111.         document.getElementById('manipulationId2').innerHTML = manipulationVal2;            
  112.         document.getElementById('manipulationId3').innerHTML = manipulationVal3;    
  113.                     
  114.         document.getElementById('manipulationId4').innerHTML = manipulationVal4;            
  115.         document.getElementById('manipulationId5').innerHTML = manipulationVal5;    
  116.             
  117.         document.getElementById('manipulationId6').innerHTML = manipulationVal6;    
  118.         document.getElementById('manipulationId7').innerHTML = manipulationVal7;    
  119.             
  120.         document.getElementById('manipulationId8').innerHTML = manipulationVal8;    
  121.         document.getElementById('manipulationId9').innerHTML = manipulationVal9;    
  122.         document.getElementById('manipulationId10').innerHTML = manipulationVal10;    
  123.             
  124.         document.getElementById('manipulationId11').innerHTML = manipulationVal11;    
  125.         document.getElementById('manipulationId12').innerHTML = manipulationVal12;    
  126.     </script>    
  127. </body>    
  128. </html>   
In the above code, I have simply utilized Moment.JS different methods for the manipulation of date & time. Let's view chunk by chunk different manipulation methods.
 
For the following display the number of years from the current year to 3 years back i.e.
 
 
I have used the following line of code i.e.
  1. var manipulationVal1 = moment('2015', 'YYYY').fromNow();   
For displaying the start of any month and start of any year i.e.
 
 
I have used the following code i.e.
  1. var manipulationVal2 = moment('2017-06-01').startOf('month').format('dddd, DD-MMM-YYYY');    
  2. var manipulationVal3 = moment('2018-03-15').startOf('year').format('dddd, DD-MMM-YYYY');   
For displaying the end of any month and end of any year i.e.
 
 
I have used the following piece of code i.e.
  1. var manipulationVal4 = moment('2017-06-01').endOf('month').format('dddd, DD-MMM-YYYY');    
  2. var manipulationVal5 = moment('2018-03-15').endOf('year').format('dddd, DD-MMM-YYYY');   
For displaying the number of X last days i.e.
 
 
I have used the following code i.e.
  1. var manipulationVal6 = moment().subtract(7, 'days').format('dddd, DD-MMM-YYYY');    
  2. var manipulationVal7 = moment().subtract(30, 'days').format('dddd, DD-MMM-YYYY');   
For displaying the start of this month, the end of this month and last month i.e.
 
 
I have used the following code i.e.
  1. var manipulationVal8 = moment().startOf('month').format('dddd, DD-MMM-YYYY');    
  2. var manipulationVal9 = moment().endOf('month').format('dddd, DD-MMM-YYYY');    
  3. var manipulationVal10 = moment().subtract(1, 'month').startOf('month').format('dddd, DD-MMM-YYYY');   
For displaying X number of next days i.e.
 
 
I have used the following chunk of code i.e.
  1. var manipulationVal11 = moment().add(7, 'days').format('dddd, DD-MMM-YYYY');    
  2. var manipulationVal12 = moment().add(30, 'days').format('dddd, DD-MMM-YYYY'); 
Step 4
 
Now, when you open the "datetime-manipulation.html" HTML file in any browser, you will be able to see following (of course date & time will be updated) i.e.
 
 

Conclusion

 
In this article, you will learn to use Moment.JS library. You will learn to use different date formats. You will also learn to use different time formats. You will learn to use different display variations of the day of the week and month of the year. You will also learn to use different manipulation methods of the Moment.JS library in order to calculate X number of last day or X number of next day or start and end of month and year.


Similar Articles