โ† flaviocopes.com

A Moment.js tutorial

Published Jul 08 2018

Moment.js is an awesome JavaScript library that helps you manage dates, in the browser and in Node.js as well.

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

Installation

You can include it directly in your page using a script tag, from unpkg.com:

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

or using npm:

npm install moment

If you install using npm you need to import the package (using ES Modules):

import moment from 'moment'

or require it (using CommonJS):

const moment = require('moment')

Get the current date and time

const date = moment()

Parse a date

A moment object can be initialized with a date by passing it a string:

const date = moment(string)

it accepts any string, parsed according to (in order):

ISO 8601 is definitely the most convenient. Hereโ€™s a format reference:

FormatMeaningExample
YYYY4-digits Year2018
YY2-digits Year18
M2-digits Month number, omits leading 07
MM2-digits Month number07
MMM3-letters Month nameJul
MMMMFull Month nameJuly
ddddFull day nameSunday
gggg4-digits Week year2018
gg2-digits Week year18
wWeek of the year without leading zero18
wwWeek of the year with leading zero18
eDay of the week, starts at 04
D2-digits day number, omits leading 09
DD2-digits day number09
DoDay number with ordinal9th
TIndicates the start of the time part
HH2-digits hours (24 hour time) from 0 to 2322
H2-digits hours (24 hour time) from 0 to 23 without leading 022
kk2-digits hours (24 hour time) from 1 to 2423
k2-digits hours (24 hour time) from 1 to 24 without leading 023
a/Aam or pmpm
hh2-digits hours (12 hour time)11
mm2-digits minutes22
ss2-digits seconds40
s2-digits seconds without leading zero40
S1-digits milliseconds1
SS2-digits milliseconds12
SSS3-digits milliseconds123
ZThe timezone+02:00
xUNIX timestamp in milliseconds1410432140575

Set a date

Format a date

When you want to output the content of a plain JavaScript Date object, you have little options to determine the formatting. All you can do is to use the built-in methods, and compose the date as you want using them.

Moment offers a handy way to format the date according to your needs, using the format() method:

date.format(string)

The string format accepts the same formats I described in the โ€œParse a dateโ€ section above.

Example:

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

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

ConstantFormatExample
moment.HTML5_FMT.DATETIME_LOCALYYYY-MM-DDTHH:mm2017-12-14T16:34
moment.HTML5_FMT.DATETIME_LOCAL_SECONDSYYYY-MM-DDTHH:mm:ss2017-12-14T16:34:10
moment.HTML5_FMT.DATETIME_LOCAL_MSYYYY-MM-DDTHH:mm:ss.SSS2017-12-14T16:34:10.234
moment.HTML5_FMT.DATEYYYY-MM-DD2017-12-14
moment.HTML5_FMT.TIMEHH:mm16:34
moment.HTML5_FMT.TIME_SECONDSHH:mm:ss16:34:10
moment.HTML5_FMT.TIME_MSHH:mm:ss.SSS16:34:10.234
moment.HTML5_FMT.WEEKYYYY-[W]WW2017-W50
moment.HTML5_FMT.MONTHYYYY-MM2017-12

Validating a date

Any date can be checked for validity using the isValid() method:

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

Time ago, time until date

Use fromNow(). Strings are 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 pass true to fromNow(), it just shows the difference, without reference to 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

Manipulate a date

You can add or subtract any amount of time to a date:

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

You can use those values:



Wanna go from noobie to expert?

I wrote an entire book on this topic ๐Ÿ‘‡

I also got a super cool course ๐Ÿ‘‡

© 2023 Flavio Copes Flavio Copes using Notion to Site Notion to Site. Follow on Twitter

Solopreneur? Wannabe? Adventure awaits