Explain Codes LogoExplain Codes Logo

Format JavaScript date as yyyy-mm-dd

javascript
date-formatting
timezone-adjustment
locale-specific-formatting
Nikita BarsukovbyNikita Barsukov·Feb 7, 2025
TLDR

Here's the quick and easy way to format a date as yyyy-mm-dd:

const date = new Date().toISOString().slice(0, 10);

Boom! .toISOString() turns the current date into an ISO string, and .slice(0, 10) extracts just the date portion in the yyyy-mm-dd sequence.

Getting Local: Timezone-adjusted Dates

Working with timezones? The .toISOString() method by itself gives you the date in UTC. But what if you want to represent the local timezone? Do some math with the timezone offset:

// I call this one "TimeZone Traveller" const date = new Date(new Date().getTime() - new Date().getTimezoneOffset() * 60000).toISOString().split('T')[0];

Here, .getTime() gets the millennium bug in milliseconds, .getTimezoneOffset() returns the jetlag in minutes between UTC and local time. 60000? It's just our time converter from minutes to milliseconds.

Locale is the new Black: Locale-specific formatting

For a yyyy-mm-dd date in the style of a particular locale, turn to the toLocaleDateString function:

// When in Canada, do as the Canadians do const date = new Date().toLocaleDateString('en-CA', { year: 'numeric', month: '2-digit', day: '2-digit' });

Caution: A slight change in locale parameter (say, 'en-CA' to 'en-US') might turn your date formatting upside down!

Tackling Pitfalls: JavaScript's Date Gotchas

JavaScript's date handling can be more slippery than a banana peel. Here's what to look out for:

  • Day-shift errors: These are common for dates like new Date("DateString"), especially for time travelers (regions west of UTC).
  • Inconsistent formats: Test across locales, or you might end up with a date that feels out of place.
  • Libraries: Use trusted ones like Moment.js or date-fns for robust handling and formatting of dates.

Picking the Right Format: ISO 8601 vs Others

Parsing dates from strings? Here's the guidebook:

  • Always bet on ISO 8601 format ("YYYY-MM-DDTHH:MM:SS.sssZ"). It's UTC-friendly and loves to reduce ambiguity.
  • Interchanging date patterns? Not so fast! Always check whether it's "MM/DD/YYYY" vs "DD-MM-YYYY".
  • Strings to Date objects: Convert for the flexibility and benefits of Date methods.

Locale and Time Display

The Swiss-army knife function toLocaleDateString() can serve both your date and time needs:

const options = { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', hour12: false }; const dateTimeFormat = new Date().toLocaleDateString('en-US', options).replace(',', '');

Here we've turned hour and hour12 into trustworthy allies for 24-hour format time, and replace(',', '') is our little cleaner for preferred yyyy-mm-dd format.

Advanced Date-Handling Techniques

Here are few pro-tips to go above and beyond:

  • Run browser and environment tests for your date formats.
  • Understand user's locale and regional time for more user-friendly date parsing logic.
  • Implement robust error checks when performing date operations.
  • Utilize ES6+ syntax for more succinct and readable code.