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

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,15 @@ export default defineComponent({
     showTimeZoneHint() {
       return this.dateType === "datetime" && !this.hideHint;
     },
+
+    is24HourFormat() {
+      const formatter = new Intl.DateTimeFormat(this.locale, {
+        hour: "numeric",
+        minute: "numeric",
+      });
+      const formattedTime = formatter.format(new Date(2024, 0, 1, 13, 0)); // January 1, 2024, 13:00
+      return !formattedTime.match(/AM|PM/i); // If it doesn't contain AM/PM, it's 24-hour format
+    },
   },
 
   watch: {
@@ -553,26 +562,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>