How to display the date and time in javascript using the moment.js plugin. Date and time become the main component for a programmer in applying the application. In javascript, manually displaying time is quite troublesome especially when dealing with locale and language of each country. On this occasion, I want to share how to show the time very quickly on javascript.
Read another article: [Resolved] SweetAlert Prompt Not Working On Modal Dialog Bootstrap In Firefox
Moment.js is a library of ichernev works and is designed to be able to parse, validate, manipulate and display dates and times in Javascript. This library works well across browsers or Node.js. For now, browsers used for testing moment.js are IE 8, 9, and 10 in Windows 7, IE 11 on Windows 10, Chrome in Windows XP, latest Firefox on Linux, and the latest Safari on OSX 10.8 and 10.11.
How to install Moment.js is quite easy, i.e., installed manually by calling the javascript file or installed using the package manager.
Moment.js has two types of libraries: moment.js and moment-with-locales.js . The difference is that moment-with-locales.js supports multiple languages, so you do not have to bother converting dates into the language of your home country.
The moment.js file has a fairly small size of 16.6k (English support only). While moment-with-locales.js has a size of 64.2k and supports 115 languages.
How to use moment.js.
I will display the date and time using Arabic; please copy the following script
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!DOCTYPE html> <html> <head> <title>test moment.js</title> </head> <body> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/locale/ar.js"></script> <script type="text/javascript"> console.log(moment().format('L')); console.log(moment().format('LT')); console.log(moment().format('LTS')); console.log(moment().format('L')); console.log(moment().format('l')); console.log(moment().format('LL')); console.log(moment().format('ll')); console.log(moment().format('LLL')); console.log(moment().format('lll')); console.log(moment().format('LLLL')); console.log(moment().format('llll')); </script> </body> </html> |
The following example will show the date and time in Indonesian, and please copy the following script
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!DOCTYPE html> <html> <head> <title>test moment.js</title> </head> <body> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/locale/id.js"></script> <script type="text/javascript"> console.log(moment().format('L')); console.log(moment().format('LT')); console.log(moment().format('LTS')); console.log(moment().format('L')); console.log(moment().format('l')); console.log(moment().format('LL')); console.log(moment().format('ll')); console.log(moment().format('LLL')); console.log(moment().format('lll')); console.log(moment().format('LLLL')); console.log(moment().format('llll')); </script> </body> </html> |
Similarly, short tutorial Easily Display The Date And Time Using Moment.js, hopefully, useful
Moment.js Review Plugin
- User Friendly - 90%90%
- Support - 90%90%
- CDN - 100%100%
- Free - 100%100%
Summary
Using the moment.js plugin will shorten application creation time. Also, moment.js has a lightweight plugin, so it will not overload the server.
Latest posts by Sigit Prasetya Nugroho (see all)
- Tutorial Create Todolist App With Vue Js 2 For Beginners - September 29, 2018
- Create WordPress Slider Without Javascript - August 30, 2018
- Typed.js The Javascript Library For Automatic Text Writing Effects - August 6, 2018