Moment.js tutorial

Moment.js is a great help in managing dates in JavaScript

Moment.jsIs a great JavaScript library that can help you manage dates in your browser and Node.js.

This article aims to explain the basics of the library and the most common usage.

installation

You can include it in the page directly from unpkg.com using the script tag:

<script src="https://unpkg.com/moment" />

Or usenpm:

npm install moment

If you use npm to install, you need to import the package (usingES module):

import moment from 'moment'

Or request it (usingPlain JS):

const moment = require('moment')

Get the current date and time

const date = moment()

Parse date

It can be initialized by passing a string object to a date:

const date = moment(string)

It accepts any string parsed according to (in order):

ISO 8601 is definitely the most convenient. This is the format reference:

format significance example
YYYY 4-digit year 2018
YY Two-digit year 18 years old
Medium 2-digit month number, omitting leading 0 7
Mm 2-digit month number 07
MMM 3-letter month name July
MMMM Full month name July
dddd Full day name on Sunday
gggg 4-digit anniversary 2018
gg 2 digit anniversary 18 years old
w Week of the year without zero 18 years old
w Week of the year, leading zero 18 years old
E Day of the week, starts at 0 4
d 2 digits for the day, omitting the leading 0 9
DD 2-digit day number 09
do Number of days with serial number Ninth place
T Indicates the beginning of the time portion
H 2-digit hour (24-hour clock), from 0 to 23 twenty two
H 2-digit hour (24-hour clock), from 0 to 23, leading 0 twenty two
kk 2-digit hour (24-hour clock), from 1 to 24 twenty three
k 2-digit hour (24-hour clock), from 1 to 24, without 0 twenty three
A / A amorpm in the afternoon
h 2-digit hour (12-hour time) 11
Mm 2 digit minutes twenty two
ss 2 digit seconds 40
s 2 digit seconds without leading zero 40
small 1 digit milliseconds 1
SS 2 milliseconds 12
SSS 3 digit milliseconds 123
z Time zone +02:00
X UNIX timestamp (in milliseconds) 1410432140575

Set date

Format date

When you want to output the content of a pure JavaScript Date object, there are few options to determine the format. All you can do is use the built-in method and write the date as needed.

Moment provides a convenient way to format the date according to your needs by usingformat()method:

date.format(string)

The string format accepts the same format as I described in the "Parse Date" section above.

example:

moment().format("YYYY Do MM")

Moment provides some constants, you can use them instead of writing your own format:

continuous format example
moment.HTML5_FMT.DATETIME_LOCAL YYYY-MM-DDTHH: mm 2017-12-14T16:34
moment.HTML5_FMT.DATETIME_LOCAL_SECONDS YYYY-MM-DDTHH: mm: ss 2017-12-14T16:34:10
moment.HTML5_FMT.DATETIME_LOCAL_MS YYYY-MM-DDTHH: mm: ss.SSS 2017-12-14T16:34:10.234
moment.HTML5_FMT.DATE YYYY-MM-DD 2017-12-14
moment.HTML5_FMT.TIME Height: mm 16:34
moment.HTML5_FMT.TIME_SECONDS HH: mm: ss 16:34:10
moment.HTML5_FMT.TIME_MS HH: mm: ss.SSS 16:34:10.234
moment.HTML5_FMT.WEEK YYYY- [W] WW 2017-W50
moment.HTML5_FMT.MONTH YYYY-MM 2017-12

Verification date

can useisValid()method:

moment('2018-13-23').isValid() //false
moment('2018-11-23').isValid() //true

Before time until date

usefromNow(). The string is localized:

moment('2016-11-23').fromNow() //2 years ago
moment('2018-05-23').fromNow() //a month ago
moment('2018-11-23').fromNow() //in 5 months

If you passtrueWhen it comes to fromNow(), it only shows the difference, without referencing the future/past.

moment('2016-11-23').fromNow(true) //2 years
moment('2018-05-23').fromNow(true) //a month
moment('2018-11-23').fromNow(true) //5 months

Processing date

You can add or subtract any time from the date:

moment('2016-11-23').add(1, 'years')
moment('2016-11-23').subtract(1, 'years')

You can use these values:

  • years
  • quarters
  • months
  • weeks
  • days
  • hours
  • minutes
  • seconds
  • milliseconds

Download mine for freeJavaScript beginner's manual


More js tutorials: