Skip to content

Commit

Permalink
Attempts to deal with "dayPeriod" & updated node
Browse files Browse the repository at this point in the history
With Node 16, `Intl.DateTimeFormatOptions` seems to no longer honor the `dayPeriod` option and always return the "long" version, so fallback to use the `timeStyle` option if needed
  • Loading branch information
eamodio committed Mar 25, 2022
1 parent ff3ef33 commit 401591a
Showing 1 changed file with 31 additions and 1 deletion.
32 changes: 31 additions & 1 deletion src/system/date.ts
Expand Up @@ -157,6 +157,31 @@ export function formatDate(
return formatter.format(date);
}

function getTimeFormatter(format: TimeStyle) {
const key = `${locale ?? ''}:time:${format}`;

let formatter = dateTimeFormatCache.get(key);
if (formatter == null) {
const options: Intl.DateTimeFormatOptions = { localeMatcher: 'best fit', timeStyle: format };

let locales;
if (locale == null) {
locales = defaultLocales;
} else if (locale === 'system') {
locales = undefined;
} else {
locales = [locale];
}

formatter = new Intl.DateTimeFormat(locales, options);
if (cache) {
dateTimeFormatCache.set(key, formatter);
}
}

return formatter;
}

const parts = formatter.formatToParts(date);
return format.replace(
customDateTimeFormatParserRegex,
Expand Down Expand Up @@ -188,7 +213,11 @@ export function formatDate(
if (value === 'Do' && part?.type === 'day') {
return formatWithOrdinal(Number(part.value));
} else if (value === 'a' && part?.type === 'dayPeriod') {
return part.value.toLocaleLowerCase();
// For some reason the Intl.DateTimeFormat doesn't honor the `dayPeriod` value and always returns the long version, so use the "short" timeStyle instead
const dayPeriod = getTimeFormatter('short')
.formatToParts(date)
.find(p => p.type === 'dayPeriod');
return ` ${(dayPeriod ?? part)?.value ?? ''}`;
}
return part?.value ?? '';
}
Expand Down Expand Up @@ -300,6 +329,7 @@ function getDateTimeFormatOptionsFromFormatString(
case 'dayPeriod':
options.dayPeriod = 'narrow';
options.hour12 = true;
options.hourCycle = 'h12';
break;
case 'timeZoneName':
options.timeZoneName = value.length === 2 ? 'long' : 'short';
Expand Down

0 comments on commit 401591a

Please sign in to comment.