NEXT-39641 - Add datepicker format datetime depending on the locale

.changeset/soft-suits-jog.md

@@ -0,0 +1,5 @@
+---
+"@shopware-ag/meteor-component-library": major
+---
+
+Added format to date and time in the datepicker depending on the locale. This means that the date and time are displayed in the format that is used in the locale of the user.

packages/component-library/src/components/form/mt-datepicker/mt-datepicker.spec.ts

@@ -36,7 +36,7 @@ describe("src/app/component/form/mt-datepicker", () => {
     wrapper = await createWrapper();
     const flatpickrInput = wrapper.find(".flatpickr-input");
 
-    expect(flatpickrInput.attributes().placeholder).toBe("Y-m-d");
+    expect(flatpickrInput.attributes().placeholder).toBe("m/d/Y");
   });
 
   it("should show the placeholderText, when provided", async () => {
@@ -237,4 +237,28 @@ describe("src/app/component/form/mt-datepicker", () => {
     // Skip this test because data-fns-tz is not working correctly in the test environment
     // expect(wrapper.emitted('update:modelValue')[0]).toStrictEqual(['2023-03-21T23:00:00.000Z']);
   });
+
+  it("should support other locales formats", async () => {
+    wrapper = await createWrapper({
+      props: {
+        locale: "en-Us",
+        modelValue: "2023-03-27T14:00:00.000+00:00",
+        dateType: "datetime",
+        timeZone: "Europe/Berlin",
+      },
+    });
+
+    expect(wrapper.find("input.form-control").element.value).toMatch(/03\/27\/2023, 4:00\s?PM/);
+
+    wrapper = await createWrapper({
+      props: {
+        locale: "en-Uk",
+        modelValue: "2023-03-27T14:00:00.000+00:00",
+        dateType: "datetime",
+        timeZone: "Europe/Berlin",
+      },
+    });
+
+    expect(wrapper.find("input.form-control").element.value).toMatch(/27\/03\/2023, 16:00/);
+  });
 });

packages/component-library/src/components/form/mt-datepicker/mt-datepicker.vue

@@ -284,6 +284,12 @@ export default defineComponent({
     showTimeZoneHint() {
       return this.dateType === "datetime" && !this.hideHint;
     },
+
+    is24HourFormat() {
+      const formatter = new Intl.DateTimeFormat(this.locale, { hour: "numeric" });
+      const intlOptions = formatter.resolvedOptions();
+      return !intlOptions.hour12;
+    },
   },
 
   watch: {
@@ -553,26 +559,57 @@ export default defineComponent({
 
     createConfig() {
       let dateFormat = "Y-m-dTH:i:S";
-      let altFormat = "Y-m-d H:i";
+      let altFormat = this.getDateStringFormat({
+        year: "numeric",
+        month: "2-digit",
+        day: "2-digit",
+        hour: "2-digit",
+        minute: "2-digit",
+      });
 
       if (this.dateType === "time") {
         dateFormat = "H:i:S";
-        altFormat = "H:i";
+        altFormat = this.getDateStringFormat({
+          hour: "2-digit",
+          minute: "2-digit",
+        });
       }
 
       if (this.dateType === "date") {
-        altFormat = "Y-m-d";
+        altFormat = this.getDateStringFormat({
+          year: "numeric",
+          month: "2-digit",
+          day: "2-digit",
+        });
       }
 
       this.defaultConfig = {
-        time_24hr: true,
+        time_24hr: this.is24HourFormat,
         locale: this.locale,
         dateFormat,
         altInput: true,
         altFormat,
         allowInput: true,
       };
     },
+
+    getDateStringFormat(options: Intl.DateTimeFormatOptions) {
+      const formatter = new Intl.DateTimeFormat(this.locale, options);
+      const parts = formatter.formatToParts(new Date(2000, 0, 1, 0, 0, 0));
+      const flatpickrMapping: Partial<Record<Intl.DateTimeFormatPartTypes, string>> = {
+        // https://flatpickr.js.org/formatting/
+        year: "Y", // 4-digit year
+        month: "m", // 2-digit month
+        day: "d", // 2-digit day
+        hour: this.is24HourFormat ? "H" : "h", // 24-hour or 12-hour
+        minute: "i", // 2-digit minute
+        dayPeriod: "K", // AM/PM
+      };
+      // 'literal' parts are the separators
+      return parts
+        .map((part) => (part.type === "literal" ? part.value : flatpickrMapping[part.type]))
+        .join("");
+    },
   },
 });
 </script>