diff --git a/frontend/src/components/DateField.jsx b/frontend/src/components/DateField.jsx
index 654b8b4..5899517 100644
--- a/frontend/src/components/DateField.jsx
+++ b/frontend/src/components/DateField.jsx
@@ -36,7 +36,7 @@ export default function DateField({ id, value, onChange, placeholder, className
else setText(dateToInputText(parsed))
}}
/>
- {touched && invalid && {t('Une année (1950) ou une date (12/03/1950)')}}
+ {touched && invalid && {t('Une année (1950) ou une date ({exemple})', { exemple: dateToInputText('1950-03-12') })}}
)
}
diff --git a/frontend/src/components/SearchSourcesPanel.jsx b/frontend/src/components/SearchSourcesPanel.jsx
index e26b84b..ddc216b 100644
--- a/frontend/src/components/SearchSourcesPanel.jsx
+++ b/frontend/src/components/SearchSourcesPanel.jsx
@@ -34,7 +34,7 @@ function formatDate(value) {
const options = day ? { day: 'numeric', month: 'long', year: 'numeric' } : { month: 'long', year: 'numeric' }
const text = date.toLocaleDateString(dateLocale, { ...options, timeZone: 'UTC' })
// « 1er janvier », pas « 1 janvier »
- return dateLocale === 'fr-FR' && day === 1 ? text.replace(/^1 /, '1er ') : text
+ return dateLocale.startsWith('fr') && day === 1 ? text.replace(/^1 /, '1er ') : text
}
// « Né le 24 août 1898 à Monségur (40) », accordé au sexe quand la source le donne
diff --git a/frontend/src/i18n/en/fiche.js b/frontend/src/i18n/en/fiche.js
index 6875eca..763869e 100644
--- a/frontend/src/i18n/en/fiche.js
+++ b/frontend/src/i18n/en/fiche.js
@@ -468,7 +468,7 @@ export default {
'Merci, c’est envoyé. Le moment apparaîtra dans sa vie quand la personne qui gère l’arbre l’aura accepté.': 'Thanks, it has been sent. The moment will show in their life once the person who manages the tree has accepted it.',
// Dates : année seule, décès sans date (issue #77)
'Année ou date': 'Year or date',
- 'Une année (1950) ou une date (12/03/1950)': 'A year (1950) or a date (12/03/1950)',
+ 'Une année (1950) ou une date ({exemple})': 'A year (1950) or a date ({exemple})',
'Date inconnue': 'Date unknown',
'date inconnue': 'date unknown',
'Décédé(e), date inconnue': 'Deceased, date unknown',
diff --git a/frontend/src/i18n/index.js b/frontend/src/i18n/index.js
index 7ee5100..dc80b6f 100644
--- a/frontend/src/i18n/index.js
+++ b/frontend/src/i18n/index.js
@@ -32,8 +32,26 @@ function detectLocale() {
export const locale = typeof window === 'undefined' ? 'fr' : detectLocale()
-// Pour toLocaleDateString et consorts.
-export const dateLocale = locale === 'fr' ? 'fr-FR' : 'en-GB'
+// Pour toLocaleDateString et consorts : la région du navigateur dans la langue de l'interface (en-US, fr-CA…),
+// sinon fr-FR ou en-GB. Elle décide de l'ordre jour, mois, année et du séparateur (issue #152).
+function regionalDateLocale() {
+ const fallback = locale === 'fr' ? 'fr-FR' : 'en-GB'
+ const languages = typeof navigator === 'undefined' ? [] : (navigator.languages?.length ? navigator.languages : [navigator.language])
+ const regional = languages.find((lang) => new RegExp(`^${locale}-[a-z]{2}$`, 'i').test(String(lang)))
+ if (!regional) return fallback
+ try { return Intl.DateTimeFormat.supportedLocalesOf(regional)[0] || fallback } catch { return fallback }
+}
+export const dateLocale = regionalDateLocale()
+
+// Une date en chiffres dans cette région : ordre ('dmy', 'mdy' ou 'ymd') et séparateur (« / », « - », « . »)
+export const dateFormat = (() => {
+ try {
+ const parts = new Intl.DateTimeFormat(dateLocale, { day: '2-digit', month: '2-digit', year: 'numeric' }).formatToParts(new Date(Date.UTC(2026, 9, 25)))
+ const order = parts.filter((p) => ['day', 'month', 'year'].includes(p.type)).map((p) => p.type[0]).join('')
+ const sep = parts.find((p) => p.type === 'literal')?.value.trim() || '/'
+ return ['dmy', 'mdy', 'ymd'].includes(order) ? { order, sep } : { order: 'dmy', sep: '/' }
+ } catch { return { order: 'dmy', sep: '/' } }
+})()
if (typeof document !== 'undefined') document.documentElement.lang = locale
diff --git a/frontend/src/utils/dateInput.js b/frontend/src/utils/dateInput.js
index a47bb22..c683c89 100644
--- a/frontend/src/utils/dateInput.js
+++ b/frontend/src/utils/dateInput.js
@@ -1,37 +1,75 @@
// Saisie d'une date dans la fiche : une année seule (« 1950 ») ou une date complète (« 12/03/1950 »).
// L'année seule se range au 1er janvier, la convention de toute l'appli (issue #77).
+// L'ordre et le séparateur suivent la région du navigateur : « 03/12/1950 » en en-US, « 1950-03-12 » en fr-CA
+// (issue #152). Le mois s'écrit aussi en lettres, en français ou en anglais : « 12 mars 1950 », « March 12, 1950 ».
+import { dateFormat } from '../i18n/index.js'
const pad = (n) => String(n).padStart(2, '0')
// Valeur stockée (« 1950-01-01 », « 1950 », « 1950-03-12 ») vers le texte du champ
-export function dateToInputText(value) {
+export function dateToInputText(value, { order, sep } = dateFormat) {
const raw = String(value ?? '').trim()
if (!raw) return ''
const full = raw.match(/^(\d{4})-(\d{2})-(\d{2})/)
- if (full) return full[2] === '01' && full[3] === '01' ? full[1] : `${full[3]}/${full[2]}/${full[1]}`
+ if (full) {
+ const [, y, m, d] = full
+ if (m === '01' && d === '01') return y
+ const parts = { d, m, y }
+ return order.split('').map((k) => parts[k]).join(sep)
+ }
const year = raw.match(/^(\d{4})$/)
return year ? year[1] : raw
}
-// Chiffres seuls au-delà d'une année (5 à 8 chiffres) : on pose les barres, « 12031950 » → « 12/03/1950 »
-export function formatDigitsAsDate(text) {
+// Chiffres seuls au-delà d'une année (5 à 8 chiffres) : on pose les séparateurs, « 12031950 » → « 12/03/1950 »
+export function formatDigitsAsDate(text, { order, sep } = dateFormat) {
const raw = String(text ?? '')
if (!/^\d{5,8}$/.test(raw)) return raw
- return `${raw.slice(0, 2)}/${raw.slice(2, 4)}/${raw.slice(4)}`
+ if (order === 'ymd') return [raw.slice(0, 4), raw.slice(4, 6), raw.slice(6)].filter(Boolean).join(sep)
+ return `${raw.slice(0, 2)}${sep}${raw.slice(2, 4)}${sep}${raw.slice(4)}`
+}
+
+// Noms des mois sans accents, en minuscules, dans les deux langues de l'appli
+const MONTHS = [
+ ['janvier', 'january'], ['fevrier', 'february'], ['mars', 'march'], ['avril', 'april'], ['mai', 'may'], ['juin', 'june'],
+ ['juillet', 'july'], ['aout', 'august'], ['septembre', 'september'], ['octobre', 'october'], ['novembre', 'november'], ['decembre', 'december'],
+]
+const normalize = (s) => s.normalize('NFD').replace(/\p{M}/gu, '').toLowerCase()
+
+// « juin », « June », « sept. », « févr » : un mois si le mot (3 lettres au moins) n'en désigne qu'un
+function monthFromWord(word) {
+ const w = normalize(word).replace(/\.$/, '')
+ if (w.length < 3 || !/^[a-z]+$/.test(w)) return undefined
+ const found = new Set(MONTHS.flatMap((names, i) => (names.some((n) => n.startsWith(w)) ? [i + 1] : [])))
+ return found.size === 1 ? [...found][0] : undefined
+}
+
+// « 12 juin 1950 », « 1er juin 1950 », « June 12, 1950 », « 12 June 1950 »
+function parseWritten(raw) {
+ const words = raw.replace(/,/g, ' ').replace(/\b(\d{1,2})(er|st|nd|rd|th)\b/gi, '$1').split(/\s+/).filter(Boolean)
+ if (words.length !== 3 || !/^\d{4}$/.test(words[2])) return undefined
+ const [a, b, year] = words
+ if (/^\d{1,2}$/.test(a) && monthFromWord(b)) return { day: a, month: monthFromWord(b), year }
+ if (monthFromWord(a) && /^\d{1,2}$/.test(b)) return { day: b, month: monthFromWord(a), year }
+ return undefined
}
// Texte du champ vers la valeur stockée : '' si vide, « AAAA-MM-JJ » si valable, undefined si on ne comprend pas
-export function parseDateInput(text) {
+export function parseDateInput(text, { order } = dateFormat) {
const raw = String(text ?? '').trim()
if (!raw) return ''
if (/^\d{4}$/.test(raw)) return `${raw}-01-01`
let day
let month
let year
- const dmy = raw.match(/^(\d{1,2})[/.\-\s](\d{1,2})[/.\-\s](\d{4})$/)
- const iso = raw.match(/^(\d{4})-(\d{2})-(\d{2})$/)
- if (dmy) [, day, month, year] = dmy
- else if (iso) [, year, month, day] = iso
+ const yearLast = raw.match(/^(\d{1,2})[/.\-\s](\d{1,2})[/.\-\s](\d{4})$/)
+ const yearFirst = raw.match(/^(\d{4})[/.\-\s](\d{1,2})[/.\-\s](\d{1,2})$/)
+ const written = yearLast || yearFirst ? undefined : parseWritten(raw)
+ // Année en dernier : le mois d'abord seulement dans une région qui l'écrit ainsi (en-US)
+ if (yearLast && order === 'mdy') [, month, day, year] = yearLast
+ else if (yearLast) [, day, month, year] = yearLast
+ else if (yearFirst) [, year, month, day] = yearFirst
+ else if (written) ({ day, month, year } = written)
else return undefined
const d = Number(day)
const m = Number(month)
diff --git a/frontend/src/utils/dateInput.test.js b/frontend/src/utils/dateInput.test.js
index 5b0b668..767d79c 100644
--- a/frontend/src/utils/dateInput.test.js
+++ b/frontend/src/utils/dateInput.test.js
@@ -38,3 +38,55 @@ describe('formatDigitsAsDate', () => {
expect(formatDigitsAsDate('1/3/1950')).toBe('1/3/1950')
})
})
+
+const FR = { order: 'dmy', sep: '/' }
+const US = { order: 'mdy', sep: '/' }
+const CA = { order: 'ymd', sep: '-' }
+
+describe('région du navigateur (issue #152)', () => {
+ it('en-US : le mois avant le jour', () => {
+ expect(dateToInputText('1950-03-12', US)).toBe('03/12/1950')
+ expect(parseDateInput('03/12/1950', US)).toBe('1950-03-12')
+ expect(parseDateInput('12/25/1950', US)).toBe('1950-12-25')
+ expect(parseDateInput('25/12/1950', US)).toBeUndefined()
+ expect(formatDigitsAsDate('03121950', US)).toBe('03/12/1950')
+ })
+ it('fr-CA : l année d abord, avec des tirets', () => {
+ expect(dateToInputText('1950-03-12', CA)).toBe('1950-03-12')
+ expect(parseDateInput('1950-3-12', CA)).toBe('1950-03-12')
+ expect(formatDigitsAsDate('19500312', CA)).toBe('1950-03-12')
+ expect(formatDigitsAsDate('19503', CA)).toBe('1950-3')
+ })
+ it('une année seule ne change nulle part', () => {
+ for (const f of [FR, US, CA]) {
+ expect(dateToInputText('1950-01-01', f)).toBe('1950')
+ expect(dateToInputText('1950', f)).toBe('1950')
+ expect(parseDateInput('1950', f)).toBe('1950-01-01')
+ }
+ })
+ it('l année en premier se lit partout', () => {
+ expect(parseDateInput('1950-03-12', FR)).toBe('1950-03-12')
+ expect(parseDateInput('1950/03/12', US)).toBe('1950-03-12')
+ })
+})
+
+describe('mois en lettres, français ou anglais', () => {
+ it('jour, mois, année', () => {
+ expect(parseDateInput('12 juin 1924', FR)).toBe('1924-06-12')
+ expect(parseDateInput('1er août 1950', FR)).toBe('1950-08-01')
+ expect(parseDateInput('12 June 1924', US)).toBe('1924-06-12')
+ expect(parseDateInput('3 sept. 1901', FR)).toBe('1901-09-03')
+ expect(parseDateInput('3 févr 1901', FR)).toBe('1901-02-03')
+ expect(parseDateInput('3 FEVRIER 1901', FR)).toBe('1901-02-03')
+ })
+ it('mois, jour, année', () => {
+ expect(parseDateInput('June 12, 1924', US)).toBe('1924-06-12')
+ expect(parseDateInput('Aug 1st 1950', FR)).toBe('1950-08-01')
+ })
+ it('refuse un mois ambigu ou une date impossible', () => {
+ expect(parseDateInput('12 ju 1924', FR)).toBeUndefined()
+ expect(parseDateInput('12 jui 1924', FR)).toBeUndefined()
+ expect(parseDateInput('31 juin 1924', FR)).toBeUndefined()
+ expect(parseDateInput('juin 1924', FR)).toBeUndefined()
+ })
+})