How to convert an ISO date to the date format yyyy-mm-dd?

Deep dive into date conversion

To understand how we magically transformed our ISO date into a simpler format, let's dive deeper. The Date object in JavaScript is our handy-dandy tool for manipulating dates.

First, we created a new date from the ISO string, then formatted the date into the ISO 8601 format and sliced out the date part:

let isoDate = '2077-11-12T22:00:00.000Z'; // Our ISO string
let dateObj = new Date(isoDate); // Converting the ISO string into a Date object
let formattedDate = dateObj.toISOString().slice(0, 10); // Formatting to ISO and then slicing 
console.log(formattedDate); // Logs "2077-11-12"


Dealing with date components

Sometimes, the ninja way can be overkill. Plus, who doesn't love manual labor? Let's break down the date into individual year, month, and day components:

let isoDate = '2077-11-12T22:00:00.000Z'; // The year we all became samurais
let date = new Date(isoDate);
let year = date.getFullYear(); 
let month = String(date.getMonth() + 1).padStart(2, '0'); // Because JavaScript thinks January starts at 0 not 1
let day = String(date.getDate()).padStart(2, '0'); // Adding the leading "NRD" (Ninja-Required-Digit)
let simpleDate = `${year}-${month}-${day}`;

console.log(simpleDate); // Logs "2077-11-12" (Again!)


See, the cyber-ninja doesn't need any fancy moves for such simple tricks.

Digging further into date conversions

Fancy formatting using toLocaleDateString()

If you ever feel like impressing the shogun with dates formatted for specific locales, behold the toLocaleDateString() technique:

let isoDate = '2077-11-12T22:00:00.000Z';
let dateObj = new Date(isoDate);
let options = { year: 'numeric', month: '2-digit', day: '2-digit' };
let simpleDate = dateObj.toLocaleDateString('en-CA', options); // Because Canadians like it ISO-ish

console.log(simpleDate); // Logs "2077-11-12"


Alright, where's my maple syrup?

Playing nice with time zones (UTC)

In case you're time-traveling across time zones, make sure to respect the UTC Samurai Code:

let isoDate = '2077-11-12T22:00:00.000Z';
let dateObj = new Date(isoDate);
let year = dateObj.getUTCFullYear();
let month = String(dateObj.getUTCMonth() + 1).padStart(2, '0');
let day = String(dateObj.getUTCDate()).padStart(2, '0');
let simpleDate = `${year}-${month}-${day}`;

console.log(simpleDate); // Logs "2077-11-12" (Just in case!)


Now you have mastered the art of date conversion across time zones.

Power-ups: Date manipulation libraries

On more complex quests, arm yourself with libraries such as date-fns or Day.js. But remember, a true samurai never overkills:

import dayjs from 'dayjs';

let isoDate = '2023-03-28T15:00:00.000Z';
let simpleDate = dayjs(isoDate).format('YYYY-MM-DD');

console.log(simpleDate); // Logs "2077-11-12" (Yeah, It's the same date!)
