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,secondweekday,year,month,dayyear,month,dayyear,monthmonth,dayhour,minute,secondhour,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.