From ab3e133af7e88ed40f9d306ec9628bba00605552 Mon Sep 17 00:00:00 2001 From: Samir Boulahtit Date: Mon, 18 May 2026 22:55:35 +0200 Subject: [PATCH] fix(loyalty): use flatpickr for birthday so Firefox honors dd/mm/yyyy on FR MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Native defers display format to the browser's locale, which most engines pick up from the attribute. Firefox is the exception — it ignores lang and uses the OS locale instead (Mozilla bug #1344625, still open). So FR users on Firefox still saw mm/dd/yyyy even after the lang fix from earlier this week. Swap to flatpickr for both the customer storefront enrollment page and the staff terminal enrollment page. Configure: - dateFormat: 'Y-m-d' (what gets sent to the API — ISO, what Pydantic's date field expects) - altInput: true (flatpickr creates a separate visible input) - altFormat: 'd/m/Y' (what the user sees — universal in Europe) - locale: current_language (FR/DE/LB month + day names) - maxDate: 'today' (no future birthdays) Load flatpickr core + the optional locale JS via the existing {% block extra_head %} / {% block extra_scripts %} hooks. The loyalty/store/enroll.html template didn't have those blocks before, added them in the same commit. Co-Authored-By: Claude Opus 4.7 (1M context) --- .../templates/loyalty/store/enroll.html | 26 +++++++++++++++++- .../templates/loyalty/storefront/enroll.html | 27 ++++++++++++++++++- 2 files changed, 51 insertions(+), 2 deletions(-) diff --git a/app/modules/loyalty/templates/loyalty/store/enroll.html b/app/modules/loyalty/templates/loyalty/store/enroll.html index e1a981ef..c395a911 100644 --- a/app/modules/loyalty/templates/loyalty/store/enroll.html +++ b/app/modules/loyalty/templates/loyalty/store/enroll.html @@ -9,6 +9,11 @@ {% block alpine_data %}storeLoyaltyEnroll(){% endblock %} +{% block extra_head %} + + +{% endblock %} + {% block content %} {% call detail_page_header("'" + _('loyalty.store.enroll.page_title') + "'", '/store/' + store_code + '/loyalty/terminal') %} {{ _('loyalty.store.enroll.subtitle') }} @@ -58,7 +63,21 @@
- — Firefox ignores + the html lang attribute for native date inputs. dd/mm/yyyy + universally accepted in Europe. #} +

{{ _('loyalty.store.enroll.birthday_help') }}

@@ -147,5 +166,10 @@ {% endblock %} {% block extra_scripts %} +{# flatpickr loaded synchronously so x-init can call flatpickr() during Alpine setup #} + +{% if current_language and current_language != 'en' %} + +{% endif %} {% endblock %} diff --git a/app/modules/loyalty/templates/loyalty/storefront/enroll.html b/app/modules/loyalty/templates/loyalty/storefront/enroll.html index d6538bb6..7deea81e 100644 --- a/app/modules/loyalty/templates/loyalty/storefront/enroll.html +++ b/app/modules/loyalty/templates/loyalty/storefront/enroll.html @@ -7,6 +7,11 @@ {% block alpine_data %}customerLoyaltyEnroll(){% endblock %} +{% block extra_head %} + + +{% endblock %} + {% block content %}
@@ -84,7 +89,22 @@ - — Firefox ignores + the html lang attribute for native date inputs, so users on FR + still saw mm/dd/yyyy. flatpickr enforces dd/mm/yyyy across all + browsers and locales (universal in Europe). #} +

{{ _('loyalty.enrollment.form.birthday_hint') }}

@@ -170,5 +190,10 @@ {% endblock %} {% block extra_scripts %} +{# flatpickr loaded synchronously so x-init can call flatpickr() during Alpine setup #} + +{% if current_language and current_language != 'en' %} + +{% endif %} {% endblock %}