Web developers looking to add some extra functionality to their websites with dates and times may find the JavaScript date-fns library very useful. This library, which is free to use, includes a range of date-related methods that can make coding easier, which include international time support.

You can find the code used here at MrZacSmith GitHub repo!

Date-fns replacing MomentJS?

Date-fns is a light weight set of functions to handle the native JavaScript Date object, and has about the same number of functions as MomentJS. The advantage of date-fns is that you only import what you need, thus reducing both build size and overall lag related to the date calculations. In their Project Status, MomentJS  states that they support moving away from Moment to reduce size and changing the code would lead to a ton of breaking changes that would effect the world.

Learn date-fns

Date-fns works with both commonjs and modules, in this example I am using modules.

NOTE: when creating a new Date() object, the format is: year, month-1, day of month. Yes, if you are not familiar, June 6, 2022 would be:

const dateTest = format(new Date(2022, 5, 6), 'MM-dd-yyyy')
console.log('date', dateTest)
// output 
date -> 06-06-2022

Only the month is treated like an array with 0 index... so be sure and confirm your date is correct!

Getting started

  1. create a directory to work && cd into that directory
  2. run npm init -y
  3. install date-fns library npm i date-fns
  4. if you want to use modules instead of commonjs, in package.json add "type": "module"
  5. create a working file, in this case index.js

Import date-fns and functions

import {
} from 'date-fns'

These are the ones in this example, but review the docs for the functions you need, add, and use.

To make an array of dates:

const dates = [
  new Date(1990, 3, 4),
  new Date(1975, 5, 1),
  new Date(2022, 6, 24),

dates.forEach((date) => console.log(addWeeks(date, 2)))
// output 

In the next example, we will provide a start date which would normally come from a calendar input. Next we will add 52 weeks to it, format those, confirm that the start date is a Monday and then move date the end date to the previousFriday, and confirm that! I know, that is a lot, yet very simple in date-fns.

// create new Date object
const start = new Date(2022, 6, 25)

// add 52 weeks to that date
const wks = addWeeks(start, 52)

// get the previous Friday before the end of 52 weeks
const end = previousFriday(wks)

// format the dates
const startF = format(start, 'MM/dd/yyyy')
const endF = format(end, 'MM/dd/yyyy')

// confirm that start date is Monday
// confirm that end date is Friday
  `\n${startF}: monday ${isMonday(start)}\n---\n${endF}: friday ${isFriday(
// output
07/25/2022: monday true
07/21/2023: friday true

// return the formated dates in a useable string
console.log(`RENDER DATES: ${startF} -  ${endF}`)
// output
RENDER DATES: 07/25/2022 -  07/21/2023

I hope this help you get started learning date-fns for web development, your next NodeJS project, and anything catches your imagination.

Now that you know all about the different date-fns methods, you can start using them in your web development projects. Each of these methods offers a unique way to handle date and time values, so be sure to experiment with them to find the ones that work best for your needs.

If you would like to hire professional, dedicated JavaScript Engineers that specialize in Ghost CMS custom developer, visit Code Shock!