[6.x] Ability to select the date formatting locale (#14372)

Author: jasonvarga

lang/en/messages.php

@@ -198,6 +198,8 @@
     'phpinfo_utility_description' => 'Check PHP configuration settings and installed modules.',
     'plus_count_more' => '+ :count more',
     'preference_confirm_dirty_navigation_instructions' => 'Whether you should get a warning when trying to leave the page when there are unsaved changes.',
+    'preference_formatting_locale_invalid' => 'Please enter a valid locale code.',
+    'preference_formatting_locale_instructions' => 'The locale used for formatting values in the control panel, such as dates and numbers.',
     'preference_locale_instructions' => 'The preferred language for the control panel.',
     'preference_start_page_instructions' => 'The page to be shown when logging into the control panel.',
     'preference_strict_accessibility_instructions' => 'We\'ve designed the control panel with accessibility in mind, aiming to meet WCAG 2.2 guidelines where possible. Enable this option to apply stricter accessibility rules by increasing form border contrast.',

resources/js/bootstrap/fieldtypes.js

@@ -17,6 +17,7 @@ import Routes from '../components/collections/Routes.vue';
 import TitleFormats from '../components/collections/TitleFormats.vue';
 import ColorFieldtype from '../components/fieldtypes/ColorFieldtype.vue';
 import DateFieldtype from '../components/fieldtypes/DateFieldtype.vue';
+import FormattingLocalesFieldtype from '../components/fieldtypes/FormattingLocalesFieldtype.vue';
 import DateIndexFieldtype from '../components/fieldtypes/DateIndexFieldtype.vue';
 import DictionaryFieldtype from '../components/fieldtypes/DictionaryFieldtype.vue';
 import DictionaryIndexFieldtype from '../components/fieldtypes/DictionaryIndexFieldtype.vue';
@@ -88,6 +89,7 @@ export default function registerFieldtypes(app) {
     app.component('collection_title_formats-fieldtype', TitleFormats);
     app.component('color-fieldtype', ColorFieldtype);
     app.component('date-fieldtype', DateFieldtype);
+    app.component('formatting_locales-fieldtype', FormattingLocalesFieldtype);
     app.component('date-fieldtype-index', DateIndexFieldtype);
     app.component('dictionary-fieldtype', DictionaryFieldtype);
     app.component('dictionary-fieldtype-index', DictionaryIndexFieldtype);

resources/js/bootstrap/statamic.js

@@ -176,6 +176,13 @@ export default {
         contrast.initialize(this.initialConfig.user?.preferences?.strict_accessibility);
         preferences.initialize(this.initialConfig.user?.preferences, this.initialConfig.defaultPreferences);
 
+        const formattingLocale = this.initialConfig.user?.preferences?.formatting_locale;
+        if (formattingLocale === 'language') {
+            dateFormatter.setDefaultLocale(this.initialConfig.translationLocale);
+        } else if (formattingLocale) {
+            dateFormatter.setDefaultLocale(formattingLocale);
+        }
+
         bootingCallbacks.forEach((callback) => callback(this));
         bootingCallbacks = [];
 

resources/js/components/DateFormatter.js

@@ -102,6 +102,21 @@ export default class DateFormatter {
         return this.date(date).options(options).toString();
     }
 
+    withLocale(locale, callback) {
+        const previousLocale = DateFormatter.defaultLocale;
+        this.setDefaultLocale(locale);
+
+        try {
+            return callback(this);
+        } finally {
+            this.setDefaultLocale(previousLocale);
+        }
+    }
+
+    setDefaultLocale(locale) {
+        DateFormatter.defaultLocale = locale;
+    }
+
     get locale() {
         return DateFormatter.defaultLocale ?? Intl.DateTimeFormat().resolvedOptions().locale;
     }

resources/js/components/fieldtypes/FormattingLocalesFieldtype.vue

@@ -0,0 +1,98 @@
+<template>
+    <Combobox
+        clearable
+        taggable
+        :options="options"
+        :read-only="isReadOnly"
+        :placeholder="null"
+        :model-value="value"
+        @update:modelValue="comboboxUpdated"
+    >
+        <template #selected-option="{ option: { value, label, sample } }">
+            <template v-if="value === 'language'">{{ label }}</template>
+            <div v-else class="w-full flex justify-between">
+                <div class="text-start flex-1">
+                    {{ getLabel(value) }}
+                    <span class="ms-4 text-gray-500 dark:text-gray-400" v-text="value" />
+                </div>
+                <span class="text-gray-500 dark:text-gray-400" v-text="getSample(value)" />
+            </div>
+        </template>
+        <template #option="{ value, label, sample }">
+            <template v-if="value === 'language'">{{ label }}</template>
+            <div v-else class="w-full flex justify-between">
+                <div class="text-start flex-1">
+                    {{ label }}
+                    <span class="ms-4 text-gray-500 dark:text-gray-400" v-text="value" />
+                </div>
+                <span class="text-gray-500 dark:text-gray-400" v-text="sample" />
+            </div>
+        </template>
+    </Combobox>
+</template>
+
+<script setup>
+import Fieldtype from '@/components/fieldtypes/fieldtype.js';
+import { dateFormatter, toast } from '@api';
+import { Combobox } from '@/components/ui';
+import { computed } from 'vue';
+
+const emit = defineEmits(Fieldtype.emits);
+const props = defineProps(Fieldtype.props);
+const { isReadOnly, update } = Fieldtype.use(emit, props);
+
+const candidateLocales = [
+    'ar', 'az', 'cs', 'da', 'de', 'de-CH', 'en', 'es', 'et', 'fa', 'fr',
+    'hu', 'id', 'it', 'ja', 'ms', 'nb', 'nl', 'pl', 'pt', 'pt-BR', 'ru',
+    'sl', 'sv', 'tr', 'uk', 'vi', 'zh-CN', 'zh-TW',
+];
+
+const displayNames = typeof Intl.DisplayNames !== 'undefined'
+    ? new Intl.DisplayNames([document.documentElement.lang || 'en'], { type: 'language' })
+    : null;
+
+const options = computed(() => {
+    const locales = Intl.DateTimeFormat.supportedLocalesOf(candidateLocales);
+
+    const formatted = locales.map((locale) => ({
+        value: locale,
+        label: getLabel(locale),
+        sample: getSample(locale),
+    }));
+
+    return [
+        { value: 'language', label: __('Same as language') },
+        ...formatted,
+    ];
+});
+
+function getLabel(locale) {
+    return displayNames?.of(locale.split('-')[0]);
+}
+
+function getSample(locale) {
+    return dateFormatter.withLocale(locale, (formatter) => formatter.format(new Date, 'datetime'));
+}
+
+function comboboxUpdated(value) {
+    if (value && !isValidLocale(value)) {
+        update(null);
+        toast.error(__('statamic::messages.preference_formatting_locale_invalid'));
+        return;
+    }
+
+    update(value || null);
+}
+
+function isValidLocale(value) {
+    if (value === 'language') {
+        return true;
+    }
+
+    try {
+        return Intl.DateTimeFormat.supportedLocalesOf([value]).length > 0;
+    } catch {
+        return false;
+    }
+}
+</script>

resources/js/tests/components/DateFormatter.test.js

@@ -47,6 +47,27 @@ test('it can statically format', () => {
     expect(DateFormatter.format('1995-03-13T22:45:19Z', { year: 'numeric' })).toBe('1995');
 });
 
+test('it can temporarily format with locale using callback', () => {
+    const formatter = new DateFormatter();
+    DateFormatter.defaultLocale = 'en-us';
+
+    const result = formatter.withLocale('de', (instance) => instance.format('2021-12-25T12:13:14Z', 'datetime'));
+
+    expect(result).toBe('25.12.2021, 12:13');
+    expect(DateFormatter.defaultLocale).toBe('en-us');
+});
+
+test('it resets locale after withLocale callback throws', () => {
+    const formatter = new DateFormatter();
+    DateFormatter.defaultLocale = 'en-us';
+
+    expect(() => formatter.withLocale('de', () => {
+        throw new Error('boom');
+    })).toThrow('boom');
+
+    expect(DateFormatter.defaultLocale).toBe('en-us');
+});
+
 test('it can format on the instance', () => {
     expect(new DateFormatter().format('1995-03-13T22:45:19Z')).toBe('3/13/1995, 10:45 PM');
     expect(new DateFormatter().format('1995-03-13T22:45:19Z', { year: 'numeric' })).toBe('1995');
@@ -186,6 +207,12 @@ test('it can get the locale', () => {
     expect(new DateFormatter().locale).toBe('fr');
 });
 
+test('it can set the default locale via setDefaultLocale', () => {
+    new DateFormatter().setDefaultLocale('de');
+    expect(DateFormatter.defaultLocale).toBe('de');
+    expect(new DateFormatter().locale).toBe('de');
+});
+
 test.each([
     ['en', 'date', '12/25/2021'],
     ['en', 'time', '12:13 PM'],

src/Fieldtypes/FormattingLocales.php

@@ -0,0 +1,10 @@
+<?php
+
+namespace Statamic\Fieldtypes;
+
+use Statamic\Fields\Fieldtype;
+
+class FormattingLocales extends Fieldtype
+{
+    protected $selectable = false;
+}

src/Preferences/CorePreferences.php

@@ -14,13 +14,19 @@ public function boot()
     {
         Preference::register('locale', [
             'type' => 'select',
-            'display' => __('Locale'),
+            'display' => __('Language'),
             'instructions' => __('statamic::messages.preference_locale_instructions'),
             'clearable' => true,
             'label_html' => true,
             'options' => $this->localeOptions(),
         ]);
 
+        Preference::register('formatting_locale', [
+            'type' => 'formatting_locales',
+            'display' => __('Formatting Locale'),
+            'instructions' => __('statamic::messages.preference_formatting_locale_instructions'),
+        ]);
+
         Preference::register('start_page', [
             'type' => 'text',
             'display' => __('Start Page'),

src/Providers/ExtensionServiceProvider.php

@@ -83,6 +83,7 @@ class ExtensionServiceProvider extends ServiceProvider
         Fieldtypes\FieldDisplay::class,
         Fieldtypes\Files::class,
         Fieldtypes\Floatval::class,
+        Fieldtypes\FormattingLocales::class,
         Fieldtypes\GlobalSetSites::class,
         Fieldtypes\Grid::class,
         Fieldtypes\Group::class,