Back to overview

Formatting dates in javascript without a library

Datepicker examples
| 2 min read
View count:

Gone are the days where we needed libraries to simply format a date (yes I’m looking at you Moment.js). After ditching Moment.js about a year ago, because it’s not good with tree-shaking and immutability, I landed on Day.js.

This was definitely an upgrade compared to Moment.js purely looking at the size of the library you’re importing, but it still felt strange to use a library to format a date.

For a new project I’m working on, I did some research, and found out that Javascript has some solid date functions built in.

Say I want to convert a UTC date to a human readable, localized string.

const date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
// Thu Dec 20 2012 04:00:00 GMT+0100 (Central European Standard Time)

The default already looks kind of ok, but my client wants it to be in Dutch, and wants the weekday to be written out fully (e.g. Wednesday). For this case, we can use the toLocaleDateString() function on the Javascript Date object.

const date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
date.toLocaleDateString("nl-BE", {
weekday: "long", // possible values: 'long', 'short', 'narrow'
year: "numeric", // possible values: 'numeric', '2-digit'
month: "short", // possible values: 'numeric', '2-digit', 'long', 'short', 'narrow'
day: "numeric", // possible values: 'numeric', '2-digit'
// donderdag 20 dec. 2012

Super easy! And easy to customise too, you don’t have to remember to use capitals, different digits (like dd-MM-yyyy etc.). Formatting without options (just a locale) will format the date the default way:

// 20/12/2012

If you want to see more options, have a look at the MDN page:

So for simple conversions/formatting this can definitely do the trick, for more complex stuff (working with different timezones, adding/subtracting days…) I’d recommend using date-fns (!

Did you like this post? Check out my latest blog posts:

Person drawing flags on the ground
9 May 2024

Feature flags with Astro + Vercel Toolbar

5 min reading time

  • vercel
  • javascript
  • astro
Astral picture
29 Mar 2024

Astro DB: Migrating my analytics data from Vercel Postgres

5 min reading time

  • astro
  • database
  • vercel
  • postgres
  • libsql
Screenshot of an analytics dashboard
16 Jan 2024

Basic analytics with Vercel Postgres - Drizzle - Astro

10 min reading time

  • vercel
  • databases
  • typescript
  • astro