Localization Implementation In Moment.JS

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 usinghe  tabove 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 selection of these languages, dates will be displayed.

Refe to the following screenshot for drop down values with locales and languages,

Code

 

  • Open index.html in 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 as below,

    output

This way, with very minimal code, we can implement localization forthe date. And not only date formats but Relative Time like '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:

Up Next
    Ebook Download
    View all
    Learn
    View all