• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
seegatesite header

Seegatesite.com

Seegatesite.com - Programming Tutorial , Sharing , How and Learn Together

  • TOOLS
    • Bootstrap Navbar Online Generator
    • Customize Sidebar Menu Bootstrap 3
    • Bootstrap Demo
  • ADVERTISE
  • CATEGORIES
    • Android
    • Blogging Tips
    • Database
    • CSS
    • Info Gadget
    • Javascript
    • Linux
    • PHP
    • Various
    • WordPress
  • Q&A
  • PHP
  • JAVASCRIPT
  • JQUERY
  • ANGULAR
  • WORDPRESS
  • SEO
  • REACT
🏠 » Javascript » Easily Display The Date And Time Using Moment.js

Easily Display The Date And Time Using Moment.js

By Sigit Prasetya Nugroho ∙ September 14, 2017 ∙ Javascript ∙ Leave a Comment

Share : TwitterFacebookTelegramWhatsapp

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.

Display The Date And Time Using Moment Javascript Plugin

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.

Table of Contents

  • 1 How to use moment.js.
    • 1.1 Similarly, short tutorial Easily Display The Date And Time Using Moment.js, hopefully, useful

How to use moment.js.

I will display the date and time using Arabic; please copy the following script

Easily Display The Date And Time Using Moment.js

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>

Show Date And Time In Javascript

Similarly, short tutorial Easily Display The Date And Time Using Moment.js, hopefully, useful

Another Javascript Related Post :

  • Adept Using Datatables Plugin In 10 Minutes For Beginners (Tutorial)
  • The Using Of Reactstrap And React-Table, Suitable For Beginners
  • Tutorial Create Simple Block UI Using React JS
  • How To Implement Login Page And Protected Route ReactJS
  • Complete Tutorial React Router Dom For Beginners (Easy-To-Understand)
  • The Right Way Understanding React Lifecycle For Beginners

Avatar for Sigit Prasetya Nugroho

About Sigit Prasetya Nugroho

This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Welcome to my Home,

Avatar for Sigit Prasetya NugrohoThis site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.



Popular Articles

Checked checkbox AdminLTE Bootstrap in Jquery

November 4, 2014 By Sigit Prasetya Nugroho 7 Comments

Simple create date format validation with jqueryUI

December 21, 2014 By Sigit Prasetya Nugroho Leave a Comment

Create Simple Progress Bar for Fake Online Generator with Jquery

January 10, 2015 By Sigit Prasetya Nugroho Leave a Comment

22+ Coolest Free Jquery Plugin For Premium Theme

October 3, 2015 By Sigit Prasetya Nugroho Leave a Comment

Easy Build Your Anti Copy Paste Plugin

October 6, 2015 By Sigit Prasetya Nugroho Leave a Comment

Popular Tags

adminlte (15) adsense (13) adsense tips (4) affiliate amazon (13) amazon (12) Android (8) angular (16) angular 4 (12) angular 5 (4) asin grabber (3) Bootstrap (27) codeigniter (5) create wordpress theme (5) crud (8) css (6) free wordpress theme (7) google adsense (4) imacros (4) increase traffic (6) jquery (34) laravel (10) laravel 5 (5) learn android (5) modal dialog (5) mysql (6) nodeJs (4) optimize seo (4) pdo (6) php (30) plugin (53) pos (7) Publisher Tips (5) react (3) Reactjs (7) SEO (37) theme (17) tutorial angular (5) tutorial angular 4 (6) tutorial javascript (10) tutorial javascript beginners (4) twitter (3) widget (3) wordpress (18) wordpress plugin (13) XMLRPC (5)




  • About
  • Contact Us
  • Disclaimer
  • Privacy Policy
  • Terms and Conditions

©2021 Seegatesite.com