Back to overview

Formatting dates in javascript without a library

| 2 min read

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));
console.log(
  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:

console.log(date.toLocaleDateString('nl-BE'));
// 20/12/2012

If you want to see more options, have a look at the MDN page: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString.

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 (https://github.com/date-fns/date-fns)!

Add a comment

Comments

No comments yet. Be the first to add one!

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

macOS dock showing the hover effect
10 Jun 2023

Creating a macOS style dock with CSS variables and :has selector

  • astro
  • css
Stars in space
8 Mar 2023

Using TRPC in Astro and its (React) islands

  • astro
  • react
  • javascript
Phone with passcode screen
18 Feb 2023

Setting up authentication in Astro with Prisma and Planetscale

  • javascript
  • astro
  • authentication