Managing Dates and Times with JavaScript and Moment.js – introduction

Managing Dates and Times with JavaScript and Moment.js – introduction

Managing Dates and Times with JavaScript and Moment.js – introduction

What is Moment.js?

Moment.js is a free and open source JavaScript library that removes the need to use the native JavaScript Date object directly. The library is a wrapper for the Date object (in the same way that jQuery is a wrapper for JavaScript) making the object a whole lot easier to work with.

The problem with JavaScript’s Date object isn’t the functionality it brings; it’s the hastle it brings in using it for a developer. If you want to do complex parsing, validation and displaying of dates, you’ll end up writing a lot of code…

Moment.js also enriches native JavaScript date capabilities with a variety of features, such as relative time, calendar time, durations and multi-language support.

Installing Moment.js

bower install moment --save # bower
npm install moment --save   # npm
yarn add moment             # Yarn
Install-Package Moment.js   # NuGet
spm install moment --save   # spm
meteor add momentjs:moment  # meteor

 

Date Formatting

Date formatting with Moment is straight forward and simple, as shown in the following example.
moment() gives the current date and time, while format() converts the current date and time to the specified format. See list of tokens to use as format syntax.

moment().format('YYYY MM DD');

 

Year, month, and day tokens
Input Example Description
YYYY 2014 4 or 2 digit year
YY 14 2 digit year
Y -25 Year with any number of digits and sign
Q 1..4 Quarter of year. Sets month to first month in quarter.
M MM 1..12 Month number
MMM MMMM Jan..December Month name in locale set by moment.locale()
D DD 1..31 Day of month
Do 1st..31st Day of month with ordinal
DDD DDDD 1..365 Day of year
X 1410715640.579 Unix timestamp
x 1410715640579 Unix ms timestamp
Week year, week, and weekday tokens
Input Example Description
gggg 2014 Locale 4 digit week year
gg 14 Locale 2 digit week year
w ww 1..53 Locale week of year
e 0..6 Locale day of week
ddd dddd Mon…Sunday Day name in locale set by moment.locale()
GGGG 2014 ISO 4 digit week year
GG 14 ISO 2 digit week year
W WW 1..53 ISO week of year
E 1..7 ISO day of week
Hour, minute, second, millisecond, and offset tokens
Input Example Description
H HH 0..23 Hours (24 hour time)
h hh 1..12 Hours (12 hour time used with a A.)
k kk 1..24 Hours (24 hour time from 1 to 24)
a A am pm Post or ante meridiem (Note the one character a p are also considered valid)
m mm 0..59 Minutes
s ss 0..59 Seconds
S SS SSS 0..999 Fractional seconds
Z ZZ +12:00 Offset from UTC as +-HH:mm, +-HHmm, or Z

 

Date Validation

Moment.js has simplified date validation. In order to perform date validation, simply pass a date string to the moment object, along with the date format, and call the isValid() method. This method returns true if the date is valid, and false otherwise.

moment('2017-05-04','YYYY-MM-DD', true).isValid()

 

Date Calculation

Moment.js offers a way to calculate the difference between two dates.

moment().add('days', 7);    // add 7 days to current date
moment().add('months', 7);  // add 7 months to current date
moment().add('years', 7);   // add 7 years to current date

moment().subtract('days', 7);   // subtract 7 days to current date
moment().subtract('months', 7); // subtract 7 months to current date
moment().subtract('years', 7);  // subtract 7 years to current date

 

Code samples


About the Author

Daan is a Creative-Geek who loves learning and sharing new techniques! Follow him on Twitter to keep up to date with the Creative-Geeks blog and other subjects. Contact him on e-mail : info[at]creative-geeks.com.