Post
Ask Question

Localization Implementation In Moment.JS

Introduction

 
Nowadays, I am a big fan of Moment.js. One of the reasons is also the way in which localization is handled in Moment.js. That too is with minimal code implementations. 
 
For achieving localization using Moment.js, moment-with-locales.min.js is used. This file can be located using the following CDN path.
 
Now follow the below steps for localization implementation of the date using the  above JavaScript file,
 
Create index.html and copy paste the following code:
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <title>Localization using moment.js</title>  
  5.     <meta charset="utf-8">  
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">  
  7.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  
  8.     <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment-with-locales.min.js"></script>  
  9. </head>  
  10. <body>  
  11.     <h4>  
  12.         Select Language from below drop down and see localized date display below.</h4>  
  13.     <select id="selLanguage">  
  14.         <option value="">None</option>  
  15.         <option value="bn">Bengali</option>  
  16.         <option value="hi">Hindi</option>  
  17.         <option value="ml">Malayalam</option>  
  18.         <option value="mr">Marathi</option>  
  19.         <option value="ta">Tamil</option>  
  20.         <option value="te">Telugu</option>  
  21.     </select>  
  22.     <br />  
  23.     <br />  
  24.     <div id="currentDateTime">  
  25.     </div>  
  26.     <script type="text/javascript">  
  27.        $(document).ready(function(){             
  28.            $("#selLanguage").change(function() {              
  29.             var selectedVal = $(this).find(':selected').val();  
  30.            $('#currentDateTime').text(moment().locale(selectedVal).format('LLLL'));    
  31.            });              
  32.        });  
  33.     </script>  
  34. </body>  
  35. </html>  
In the above code base, you will notice, JavaScript reference for moment-with-locales.min.js.
 
Which is actually generating localized date formats for us.
 
To display dates in locale format the following function is used. moment().locale('en').format('LLLL').
 
In the above function, if we pass current locale as 'en', then the date will be returned as:
 
Tuesday, February 23, 2016, 1:41 AM
 
To display date formats for various locales, I have added a drop-down with languages and their locales. And upon the selection of these languages, dates will be displayed.
 
Refer to the following screenshot for drop-down values with locales and languages,
 
Code
 
  • Open index.html in a browser and select the language from the drop-down.
     
    select the language from the drop down
     
  • Select languages one by one from the drop-down and see the date displayed in respective languages.
     
    Select languages
     
    Some of the other samples can be seen below,
     
    output
This way, with very minimal code, we can implement localization for the date. And not only date formats but Relative Timelike 'an hour ago,' '1 year ago' can also be localized.
 
Try the above code snippet and enjoy localization using Moment.js.
 
Read more articles on JavaScript:


Similar Articles