Date formatting and sorting in Javascript

Using Intl.DateTimeFormat to customise formatting dates as strings

new Intl.DateTimeFormat("en-GB", {
  year: "numeric",
  month: "short",
}).format(new Date());  

// Jul 2023


new Intl.DateTimeFormat("en-GB", {
  year: "numeric",
  month: "long",
}).format(new Date());  

// July 2023


new Intl.DateTimeFormat('en-GB', {
    weekday: 'short',
    day: '2-digit',
    month: 'short',
    year: 'numeric'
}).format(new Date());  

// Thu, 26 Oct 2023

new Intl.DateTimeFormat('en-GB', {
    weekday: 'short',
    day: '2-digit',
    month: 'short',
    year: 'numeric',
    hour: 'numeric',
    minute: 'numeric',
    second: 'numeric'
}).format(new Date());  

// Wed, 17 Apr 2024, 15:31:23

Subsets of DateTime for formatting

The following properties describe the date-time components to use in formatted output, and their desired representations. Implementations are required to support at least the following subsets:

  • weekday, year, month, day, hour, minute, second
  • weekday, year, month, day
  • year, month, day
  • year, month
  • month, day
  • hour, minute, second
  • hour, minute

weekday

The representation of the weekday. Possible values are:

"long" (e.g., Thursday)
"short" (e.g., Thu)
"narrow" (e.g., T). Two weekdays may have the same narrow style for some locales (e.g. Tuesday's narrow style is also T).

year

The representation of the year. Possible values are:

"numeric" (e.g., 2012)
"2-digit" (e.g., 12)

month

The representation of the month. Possible values are:

"numeric" (e.g., 3)
"2-digit" (e.g., 03)
"long" (e.g., March)
"short" (e.g., Mar)
"narrow" (e.g., M). Two months may have the same narrow style for some locales (e.g. May's narrow style is also M).

day

The representation of the day. Possible values are:

"numeric" (e.g., 1)
"2-digit" (e.g., 01)

hour

The representation of the hour. Possible values are "numeric", "2-digit".

minute

The representation of the minute. Possible values are "numeric", "2-digit".

second

The representation of the second. Possible values are "numeric","2-digit".

toISOString()

new Date.toISOString(); // 2025-09-04T08:49:15.164Z
new Date.toISOString().split('T')[0]; // 2025-09-04

Sorting rows with dates:

<tr data-date="2025-09-01"> 
<tr data-date="2025-09-05"> 
<tr data-date="2025-09-06"> 
<tr data-date="2025-09-16">

const today = new Date().toISOString().split('T')[0];
const rows = [...document.querySelectorAll('tr[data-date]')];
rows.sort((a, b) => a.dataset.date.localeCompare(b.dataset.date));
const targetRow = rows.find(row => row.dataset.date >= today);
targetRow.scrollIntoView();

The data-date values and today are both in ISO 8601 format (YYYY-MM-DD), which is lexicographically sortable. That means string comparison behaves the same as date comparison — as long as the format is consistent and zero-padded.

Last updated: 9/4/2025 9:52:20 AM

Latest Updates

© 0 - 2025 - Mike Brind.
All rights reserved.
Contact me at Mike dot Brind at Outlook.com