Adds new date locale to welcome/settings

CHANGELOG.md

@@ -8,7 +8,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 ### Added
 
-- Adds `gitlens.defaultDateFormat` setting to specify the locale, a [BCP 47 language tag](https://en.wikipedia.org/wiki/IETF_language_tag), to use for date formatting
+- Adds `gitlens.defaultDateFormat` setting to specify the locale, a [BCP 47 language tag](https://en.wikipedia.org/wiki/IETF_language_tag#List_of_major_primary_language_subtags), to use for date formatting
 
 ### Changes
 

README.md

@@ -1003,14 +1003,14 @@ See also [View Settings](#view-settings- 'Jump to the View settings')
 
 ## Date & Time Settings [#](#date--time-settings- 'Date & Time Settings')
 
-| Name                             | Description                                                                                                                                                                                                                                                                                                                               |
-| -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `gitlens.defaultDateFormat`      | Specifies how absolute dates will be formatted by default. See the [Moment.js docs](https://momentjs.com/docs/#/displaying/format/) for supported formats                                                                                                                                                                                 |
-| `gitlens.defaultDateLocale`      | Specifies the locale, a [BCP 47 language tag](https://en.wikipedia.org/wiki/IETF_language_tag), to use for date formatting, defaults to the VS Code locale. Use `system` to follow the current system locale, or choose a specific locale, e.g `en-US` — US English, `en-GB` — British English, `de-DE` — German, 'ja-JP = Japanese, etc. |
-| `gitlens.defaultDateShortFormat` | Specifies how short absolute dates will be formatted by default. See the [Moment.js docs](https://momentjs.com/docs/#/displaying/format/) for supported formats                                                                                                                                                                           |
-| `gitlens.defaultDateSource`      | Specifies whether commit dates should use the authored or committed date                                                                                                                                                                                                                                                                  |
-| `gitlens.defaultDateStyle`       | Specifies how dates will be displayed by default                                                                                                                                                                                                                                                                                          |
-| `gitlens.defaultTimeFormat`      | Specifies how times will be formatted by default. See the [Moment.js docs](https://momentjs.com/docs/#/displaying/format/) for supported formats                                                                                                                                                                                          |
+| Name                             | Description                                                                                                                                                                                                                                                                                                                                                                      |
+| -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `gitlens.defaultDateFormat`      | Specifies how absolute dates will be formatted by default. See the [Moment.js docs](https://momentjs.com/docs/#/displaying/format/) for supported formats                                                                                                                                                                                                                        |
+| `gitlens.defaultDateLocale`      | Specifies the locale, a [BCP 47 language tag](https://en.wikipedia.org/wiki/IETF_language_tag#List_of_major_primary_language_subtags), to use for date formatting, defaults to the VS Code locale. Use `system` to follow the current system locale, or choose a specific locale, e.g `en-US` — US English, `en-GB` — British English, `de-DE` — German, 'ja-JP = Japanese, etc. |
+| `gitlens.defaultDateShortFormat` | Specifies how short absolute dates will be formatted by default. See the [Moment.js docs](https://momentjs.com/docs/#/displaying/format/) for supported formats                                                                                                                                                                                                                  |
+| `gitlens.defaultDateSource`      | Specifies whether commit dates should use the authored or committed date                                                                                                                                                                                                                                                                                                         |
+| `gitlens.defaultDateStyle`       | Specifies how dates will be displayed by default                                                                                                                                                                                                                                                                                                                                 |
+| `gitlens.defaultTimeFormat`      | Specifies how times will be formatted by default. See the [Moment.js docs](https://momentjs.com/docs/#/displaying/format/) for supported formats                                                                                                                                                                                                                                 |
 
 ## Menu & Toolbar Settings [#](#menu--toolbar-settings- 'Menu & Toolbar Settings')
 

package.json

@@ -2443,7 +2443,7 @@
 							"null"
 						],
 						"default": null,
-						"markdownDescription": "Specifies the locale, a [BCP 47 language tag](https://en.wikipedia.org/wiki/IETF_language_tag), to use for date formatting, defaults to the VS Code locale. Use `system` to follow the current system locale, or choose a specific locale, e.g `en-US` — US English, `en-GB` — British English, `de-DE` — German, 'ja-JP = Japanese, etc.",
+						"markdownDescription": "Specifies the locale, a [BCP 47 language tag](https://en.wikipedia.org/wiki/IETF_language_tag#List_of_major_primary_language_subtags), to use for date formatting, defaults to the VS Code locale. Use `system` to follow the current system locale, or choose a specific locale, e.g `en-US` — US English, `en-GB` — British English, `de-DE` — German, 'ja-JP = Japanese, etc.",
 						"scope": "window",
 						"order": 21
 					},

src/system/date.ts

@@ -124,14 +124,33 @@ export function fromNow(date: Date, short?: boolean): string {
 	return '';
 }
 
-export function formatDate(date: Date, format: 'full' | 'long' | 'medium' | 'short' | string | null | undefined) {
+export function formatDate(
+	date: Date,
+	format: 'full' | 'long' | 'medium' | 'short' | string | null | undefined,
+	locale?: string,
+	cache: boolean = true,
+) {
 	format = format ?? undefined;
 
-	let formatter = dateTimeFormatCache.get(format);
+	const key = `${locale ?? ''}:${format}`;
+
+	let formatter = dateTimeFormatCache.get(key);
 	if (formatter == null) {
 		const options = getDateTimeFormatOptionsFromFormatString(format);
-		formatter = new Intl.DateTimeFormat(defaultLocales, options);
-		dateTimeFormatCache.set(format, formatter);
+
+		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);
+		}
 	}
 
 	if (format == null || dateTimeFormatRegex.test(format)) {

src/webviews/apps/settings/partials/dates.html

@@ -34,6 +34,43 @@
 				<div class="settings">
 					<div class="setting">
 						<div class="setting__input">
+							<label for="defaultDateLocale">Date&nbsp;locale</label>
+							<input
+								id="defaultDateLocale"
+								name="defaultDateLocale"
+								type="text"
+								placeholder="defaults to VS Code locale"
+								data-setting
+								data-setting-preview
+							/>
+							<a
+								class="link__learn-more"
+								title="See possible BCP 47 language tag for supported locale values"
+								href="https://en.wikipedia.org/wiki/IETF_language_tag#List_of_major_primary_language_subtags"
+							>
+								<i class="icon icon__info"
+									>Can use <code>system</code> to follow the system locale, or enter a locale language
+									tag, e.g. en-US</i
+								>
+							</a>
+						</div>
+						<span class="setting__hint">
+							<span style="line-height: 2rem">
+								<i class="icon icon--sm icon__info"></i> Use <code>system</code> for the system locale,
+								or a locale language tag, e.g. en-US
+							</span>
+							<br />
+							Example date:
+							<span
+								data-setting-preview="defaultDateLocale"
+								data-setting-preview-type="date-locale"
+								data-setting-preview-default="defaultDateFormat"
+							></span>
+						</span>
+					</div>
+
+					<div class="setting">
+						<div class="setting__input">
 							<label for="defaultDateFormat">Date&nbsp;format</label>
 							<input
 								id="defaultDateFormat"
@@ -45,7 +82,7 @@
 							/>
 							<a
 								class="link__learn-more"
-								title="See Moment.js docs for valid date formats"
+								title="See Moment.js docs for supported date formats"
 								href="https://momentjs.com/docs/#/displaying/format/"
 							>
 								<i class="icon icon__info"></i>
@@ -74,7 +111,7 @@
 							/>
 							<a
 								class="link__learn-more"
-								title="See Moment.js docs for valid date formats"
+								title="See Moment.js docs for supported date formats"
 								href="https://momentjs.com/docs/#/displaying/format/"
 							>
 								<i class="icon icon__info"></i>
@@ -103,7 +140,7 @@
 							/>
 							<a
 								class="link__learn-more"
-								title="See Moment.js docs for valid date formats"
+								title="See Moment.js docs for supported date formats"
 								href="https://momentjs.com/docs/#/displaying/format/"
 							>
 								<i class="icon icon__info"></i>

src/webviews/apps/shared/appWithConfigBase.ts

@@ -9,7 +9,7 @@ import {
 	onIpc,
 	UpdateConfigurationCommandType,
 } from '../../protocol';
-import { formatDate } from '../shared/date';
+import { formatDate, setDefaultDateLocales } from '../shared/date';
 import { App } from './appBase';
 import { DOM } from './dom';
 
@@ -357,6 +357,8 @@ export abstract class AppWithConfig extends Ap
 	private updateState() {
 		this._updating = true;
 
+		setDefaultDateLocales(this.state.config.defaultDateLocale);
+
 		try {
 			for (const el of document.querySelectorAll<HTMLInputElement>('input[type=checkbox][data-setting]')) {
 				if (el.dataset.settingType === 'custom') {
@@ -439,11 +441,28 @@ export abstract class AppWithConfig extends Ap
 					value = this.getSettingValue<string>(el.dataset.settingPreview!);
 				}
 
-				if (value == null || value.length === 0) {
+				if (!value) {
 					value = el.dataset.settingPreviewDefault;
 				}
 
-				el.innerText = value == null ? '' : formatDate(date, value);
+				el.innerText = value == null ? '' : formatDate(date, value, undefined, false);
+				break;
+			}
+			case 'date-locale': {
+				if (value === undefined) {
+					value = this.getSettingValue<string>(el.dataset.settingPreview!);
+				}
+
+				if (!value) {
+					value = undefined;
+				}
+
+				const format = this.getSettingValue<string>(el.dataset.settingPreviewDefault!) ?? 'MMMM Do, YYYY h:mma';
+				try {
+					el.innerText = formatDate(date, format, value, false);
+				} catch (ex) {
+					el.innerText = ex.message;
+				}
 				break;
 			}
 			case 'commit': {
@@ -451,7 +470,7 @@ export abstract class AppWithConfig extends Ap
 					value = this.getSettingValue<string>(el.dataset.settingPreview!);
 				}
 
-				if (value == null || value.length === 0) {
+				if (!value) {
 					value = el.dataset.settingPreviewDefault;
 				}
 

src/webviews/apps/shared/icons.scss

@@ -41,6 +41,12 @@
 	mask-repeat: no-repeat;
 }
 
+.icon--sm {
+	height: 15px;
+	width: 15px;
+	top: 3px;
+}
+
 .icon--md {
 	height: 30px;
 	width: 24px;

src/webviews/apps/welcome/welcome.html

@@ -331,6 +331,40 @@
 						<div class="settings">
 							<div class="setting">
 								<div class="setting__input">
+									<label for="defaultDateLocale">Date&nbsp;locale</label>
+									<input
+										id="defaultDateLocale"
+										name="defaultDateLocale"
+										type="text"
+										placeholder="defaults to VS Code locale"
+										data-setting
+										data-setting-preview
+									/>
+									<a
+										class="link__learn-more"
+										title="See possible BCP 47 language tag for supported locale values"
+										href="https://en.wikipedia.org/wiki/IETF_language_tag#List_of_major_primary_language_subtags"
+									>
+										<i class="icon icon__info"></i>
+									</a>
+								</div>
+								<span class="setting__hint">
+									<span style="line-height: 2rem">
+										<i class="icon icon--sm icon__info"></i> Use <code>system</code> for the system
+										locale, or a locale language tag, e.g. en-US
+									</span>
+									<br />
+									Example date:
+									<span
+										data-setting-preview="defaultDateLocale"
+										data-setting-preview-type="date-locale"
+										data-setting-preview-default="defaultDateFormat"
+									></span>
+								</span>
+							</div>
+
+							<div class="setting">
+								<div class="setting__input">
 									<label for="defaultDateFormat">Date&nbsp;format</label>
 									<input
 										id="defaultDateFormat"
@@ -342,7 +376,7 @@
 									/>
 									<a
 										class="link__learn-more"
-										title="See Moment.js docs for valid date formats"
+										title="See Moment.js docs for supported date formats"
 										href="https://momentjs.com/docs/#/displaying/format/"
 									>
 										<i class="icon icon__info"></i>
@@ -371,7 +405,7 @@
 									/>
 									<a
 										class="link__learn-more"
-										title="See Moment.js docs for valid date formats"
+										title="See Moment.js docs for supported date formats"
 										href="https://momentjs.com/docs/#/displaying/format/"
 									>
 										<i class="icon icon__info"></i>
@@ -400,7 +434,7 @@
 									/>
 									<a
 										class="link__learn-more"
-										title="See Moment.js docs for valid date formats"
+										title="See Moment.js docs for supported date formats"
 										href="https://momentjs.com/docs/#/displaying/format/"
 									>
 										<i class="icon icon__info"></i>