moment.md

description
Modern alternatives to moment.js for date manipulation and formatting

Replacements for Moment.js

day.js

Day.js provides a similar API to Moment.js with a much smaller footprint.

Example:

import moment from 'moment' // [!code --]
import dayjs from 'dayjs' // [!code ++]

const now = moment() // [!code --]
const now = dayjs() // [!code ++]

const formatted = moment().format('YYYY-MM-DD') // [!code --]
const formatted = dayjs().format('YYYY-MM-DD') // [!code ++]

date-fns

date-fns offers tree-shakable functions for working with native JavaScript dates.

Example:

import moment from 'moment' // [!code --]
import { addDays, format, subWeeks } from 'date-fns' // [!code ++]

const formatted = moment().format('YYYY-MM-DD') // [!code --]
const formatted = format(new Date(), 'yyyy-MM-dd') // [!code ++]

const tomorrow = moment().add(1, 'day') // [!code --]
const tomorrow = addDays(new Date(), 1) // [!code ++]

const lastWeek = moment().subtract(1, 'week') // [!code --]
const lastWeek = subWeeks(new Date(), 1) // [!code ++]

luxon

Luxon is created by a Moment.js maintainer and offers powerful internationalization support.

Example:

import moment from 'moment' // [!code --]
import { DateTime } from 'luxon' // [!code ++]

const now = moment() // [!code --]
const now = DateTime.now() // [!code ++]

const formatted = moment().format('YYYY-MM-DD') // [!code --]
const formatted = DateTime.now().toFormat('yyyy-MM-dd') // [!code ++]

const tomorrow = moment().add(1, 'day') // [!code --]
const tomorrow = DateTime.now().plus({ days: 1 }) // [!code ++]

Date (native)

For simple use cases, native JavaScript Date and Intl APIs may be sufficient:

import moment from 'moment' // [!code --]

const formatted = moment().format('YYYY-MM-DD') // [!code --]
const formatted = new Date().toISOString().split('T')[0] // [!code ++]

const localized = moment().format('MMMM Do YYYY') // [!code --]
const localized = new Intl.DateTimeFormat('en-US', { // [!code ++]
  year: 'numeric', // [!code ++]
  month: 'long', // [!code ++]
  day: 'numeric' // [!code ++]
}).format(new Date()) // [!code ++]