diff --git a/.changeset/light-zoos-invite.md b/.changeset/light-zoos-invite.md
new file mode 100644
index 00000000..85d7295c
--- /dev/null
+++ b/.changeset/light-zoos-invite.md
@@ -0,0 +1,5 @@
+---
+"@shopware-ag/meteor-component-library": major
+---
+
+Replaced flatpickr with vue3datepicker
diff --git a/packages/component-library/package.json b/packages/component-library/package.json
index eca945fa..95f22d51 100644
--- a/packages/component-library/package.json
+++ b/packages/component-library/package.json
@@ -35,6 +35,7 @@
     "@storybook/addon-a11y": "^8.1.1",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/vue": "^8.1.0",
+    "@vuepic/vue-datepicker": "^9.0.3",
     "@vueuse/components": "^10.7.2",
     "@vueuse/core": "^10.7.2",
     "date-fns": "^2.30.0",
diff --git a/packages/component-library/src/components/form/mt-datepicker/mt-datepicker.interactive.stories.ts b/packages/component-library/src/components/form/mt-datepicker/mt-datepicker.interactive.stories.ts
index 63a6f3a0..b96ddb11 100644
--- a/packages/component-library/src/components/form/mt-datepicker/mt-datepicker.interactive.stories.ts
+++ b/packages/component-library/src/components/form/mt-datepicker/mt-datepicker.interactive.stories.ts
@@ -17,13 +17,14 @@ export const TestDatepickerShouldOpen: MtDatepickerStory = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
-    // Open datepicker
+    // Open datepicker by clicking the input wrapper
     await userEvent.click(canvas.getByRole("textbox"));
-    await waitUntil(() => document.getElementsByClassName("flatpickr-calendar").length > 0);
 
-    const calendar = within(
-      document.getElementsByClassName("flatpickr-calendar")[0] as HTMLElement,
-    );
+    // Wait until the datepicker's dropdown menu appears in the DOM
+    await waitUntil(() => document.getElementsByClassName("dp__menu").length > 0);
+
+    // Once the datepicker menu is detected, look for it within the document
+    const calendar = within(document.getElementsByClassName("dp__menu")[0] as HTMLElement);
 
     // Expect input event is triggered
     expect(calendar).toBeDefined();
@@ -35,127 +36,105 @@ export const VisualTestDateInputValue: MtDatepickerStory = {
   args: {
     label: "Date value",
     dateType: "date",
-    modelValue: new Date(Date.UTC(2024, 4, 22, 22, 22)).toISOString(),
   },
   play: async ({ canvasElement, args }) => {
     const canvas = within(canvasElement);
 
-    const calendar = within(
-      document.getElementsByClassName("flatpickr-calendar")[0] as HTMLElement,
-    );
-
-    // Open datepicker
+    // Open datepicker by clicking the input wrapper
     await userEvent.click(canvas.getByRole("textbox"));
-    await waitUntil(() => document.getElementsByClassName("flatpickr-calendar").length > 0);
-
-    // Click the 24th of month XYZ
-    await userEvent.click(calendar.getByText("24"));
+    await waitUntil(() => document.getElementsByClassName("dp__menu").length > 0);
 
-    // Click label to close datepicker
-    await userEvent.click(canvas.getByText(args.label!));
+    // Access the calendar and click the date
+    const firstDate = document.getElementById("2024-10-12") as HTMLInputElement;
+    await userEvent.click(firstDate);
 
-    // Expect input value to be the 24th of month XYZ
-    expect((canvas.getByRole("textbox") as HTMLInputElement).value).toMatch(/\d{4}-\d{2}-24/);
+    // Check that the input value matches the date chosen
+    const input = document.querySelector('[data-test="dp-input"]') as HTMLInputElement;
+    expect(input.value).toContain("2024/10/12");
 
-    // Expect input event is triggered
-    expect(args.updateModelValue).toHaveBeenCalled();
+    // Expect updatemodelvalue to have been called with date
+     expect(args.updateModelValue).toHaveBeenCalledWith(expect.stringContaining("24-10-12"));
   },
 };
 
 export const VisualTestDateTimeInputValue: MtDatepickerStory = {
   name: "Should input datetime value",
   args: {
-    modelValue: new Date(Date.UTC(2024, 4, 22, 22, 22)).toISOString(),
     label: "Date value",
     dateType: "datetime",
+    timeZone: "Europe/Berlin"
   },
   play: async ({ canvasElement, args }) => {
     const canvas = within(canvasElement);
-    const calendar = within(
-      document.getElementsByClassName("flatpickr-calendar")[0] as HTMLElement,
-    );
 
-    // Open datepicker
+    // Open datepicker by clicking the input wrapper
     await userEvent.click(canvas.getByRole("textbox"));
-    await waitUntil(() => document.getElementsByClassName("flatpickr-calendar").length > 0);
-
-    // Enter 22 as hour
-    const hourInput = calendar.getByLabelText("Hour");
-    await userEvent.clear(hourInput);
-    await userEvent.type(hourInput, "22");
-
-    // Enter 22 as minute
-    const minuteInput = calendar.getByLabelText("Minute");
-    await userEvent.clear(minuteInput);
-    await userEvent.type(minuteInput, "22");
-
-    // Click label to close datepicker
-    await userEvent.click(canvas.getByText(args.label!));
-
-    // Expect input value to be the 24th of month XYZ
-    expect((canvas.getByRole("textbox") as HTMLInputElement).value).toContain("22:22");
+    await waitUntil(() => document.getElementsByClassName("dp__menu").length > 0);
+
+    // Open the hours panel
+    const hourButton = document.querySelector(
+      '[data-test="hours-toggle-overlay-btn-0"]',
+    ) as HTMLInputElement;
+    await userEvent.click(hourButton);
+
+    // Select an hour
+    const selectedHour = document.querySelector('[data-test="12"]') as HTMLInputElement;
+    await userEvent.click(selectedHour);
+
+    // Open the minutes panel
+    const hourMin = document.querySelector(
+      '[data-test="minutes-toggle-overlay-btn-0"]',
+    ) as HTMLInputElement;
+    await userEvent.click(hourMin);
+
+    // Select minute
+    const selectedMin = document.querySelector('[data-test="40"]') as HTMLInputElement;
+    await userEvent.click(selectedMin);
+
+    // Click date within calendar
+    const firstDate = document.getElementById("2024-10-12") as HTMLInputElement;
+    await userEvent.click(firstDate);
+
+    // Check that the input value matches the date chosen
+    const input = document.querySelector('[data-test="dp-input"]') as HTMLInputElement;
+    expect(input.value).toContain("2024/10/12, 12:40");
+
+    // Expect updatemodelvalue to have been called with date
+    expect(args.updateModelValue).toHaveBeenCalledWith(expect.stringContaining("24-10-12"));
   },
 };
 
-export const VisualTestTimeInputValue: MtDatepickerStory = {
-  name: "Should input time value",
+export const VisualRangeInputValue: MtDatepickerStory = {
+  name: "Should input range",
   args: {
-    label: "Time value",
-    dateType: "time",
-    config: {
-      time_24hr: true,
-    },
+    label: "Date value",
+    dateType: "datetime",
+    range:true
   },
-  play: async ({ canvasElement, args }) => {
+  play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    const calendar = within(
-      document.getElementsByClassName("flatpickr-calendar")[0] as HTMLElement,
-    );
 
-    // Open datepicker
+    // Open datepicker by clicking the input wrapper
     await userEvent.click(canvas.getByRole("textbox"));
-    await waitUntil(() => document.getElementsByClassName("flatpickr-calendar").length > 0);
-
-    // Enter 22 as hour
-    await userEvent.clear(calendar.getByLabelText("Hour"));
-    await userEvent.type(calendar.getByLabelText("Hour"), "22");
-
-    // Enter 22 as minute
-    await userEvent.clear(calendar.getByLabelText("Minute"));
-    await userEvent.type(calendar.getByLabelText("Minute"), "22");
-    await userEvent.type(canvas.getByRole("textbox"), "{enter}");
-
-    // Click label to close datepicker
-    await userEvent.click(canvas.getByText(args.label!));
-
-    // Expect input value to be the 24th of month XYZ
-    expect((canvas.getByRole("textbox") as HTMLInputElement).value).toBe("22:22");
-  },
-};
-
-export const TestClearInputValue: MtDatepickerStory = {
-  name: "Should clear input value",
-  args: {
-    label: "Datepicker",
-    modelValue: new Date(Date.UTC(2012, 1, 21)).toISOString(),
-  },
-  play: async ({ canvasElement, args }) => {
-    const canvas = within(canvasElement);
+    await waitUntil(() => document.getElementsByClassName("dp__menu").length > 0);
 
-    // The 21st of February 2012 is correct because the Date constructor takes the month as 0-based
-    expect((canvas.getByRole("textbox") as HTMLInputElement).value).toBe("2012-02-21");
+    // Click first date on calendar
+    const firstDate = document.getElementById("2024-10-12") as HTMLInputElement;
+    await userEvent.click(firstDate);
 
-    await userEvent.click(canvas.getByTestId("mt-datepicker-clear-button"));
+    // Click second date on calendar
+    const secondDate = document.getElementById("2024-10-14") as HTMLInputElement;
+    await userEvent.click(secondDate);
 
-    // We need to loose focus
-    await userEvent.click(canvas.getByText(args.label!));
-
-    expect((canvas.getByRole("textbox") as HTMLInputElement).value).toBe("");
+    // Check that the input value matches the dates chosen
+    const input = document.querySelector('[data-test="dp-input"]') as HTMLInputElement;
+    const dateRange = input.value.split(" - ").map((date) => date.split(",")[0].trim());
+    expect(dateRange).toEqual(["2024/10/12", "2024/10/14"]);
   },
 };
 
-export const TestDisabledDoesNotOpenFlatpickr: MtDatepickerStory = {
-  name: "Should not open flatpickr when disabled",
+export const TestDisabledDoesNotOpenDatepicker: MtDatepickerStory = {
+  name: "Should not open datepicker when disabled",
   args: {
     label: "Disabled",
     disabled: true,
@@ -166,37 +145,7 @@ export const TestDisabledDoesNotOpenFlatpickr: MtDatepickerStory = {
     // Try to open datepicker
     await userEvent.click(canvas.getByRole("textbox"));
 
+    // Expect the datepciker input to be disabled
     expect((canvas.getByRole("textbox") as HTMLInputElement).disabled).toBe(true);
   },
-};
-
-export const TestManualInput: MtDatepickerStory = {
-  name: "Should emit date value when manually typed",
-  args: {
-    label: "Date value",
-    dateType: "date",
-    modelValue: null,
-  },
-  play: async ({ canvasElement, args }) => {
-    const canvas = within(canvasElement);
-    const input = canvas.getByRole("textbox");
-
-    // Focus input
-    await userEvent.click(input);
-
-    // Clear input
-    await userEvent.clear(input);
-
-    // Enter date manually
-    await userEvent.type(input, "2024-12-24");
-
-    // Click label to close datepicker
-    await userEvent.click(canvas.getByText(args.label!));
-
-    // Expect input value
-    expect((input as HTMLInputElement).value).toBe("2024-12-24");
-
-    // Expect input event is triggered
-    expect(args.updateModelValue).toHaveBeenCalledWith("2024-12-24T00:00:00");
-  },
-};
+};
\ No newline at end of file
diff --git a/packages/component-library/src/components/form/mt-datepicker/mt-datepicker.spec.ts b/packages/component-library/src/components/form/mt-datepicker/mt-datepicker.spec.ts
index cc732c13..53ed33df 100644
--- a/packages/component-library/src/components/form/mt-datepicker/mt-datepicker.spec.ts
+++ b/packages/component-library/src/components/form/mt-datepicker/mt-datepicker.spec.ts
@@ -1,5 +1,4 @@
 import { mount } from "@vue/test-utils";
-import flushPromises from "flush-promises";
 import MtDatepicker from "./mt-datepicker.vue";
 
 async function createWrapper(customOptions = {}) {
@@ -17,224 +16,67 @@ describe("src/app/component/form/mt-datepicker", () => {
     }
   });
 
-  it("should be a Vue.JS component", async () => {
+  it("is enabled by default", async () => {
     wrapper = await createWrapper();
-    expect(wrapper.vm).toBeTruthy();
-  });
-
-  it("should have enabled links", async () => {
-    wrapper = await createWrapper();
-
-    const field = wrapper.find(".mt-field");
-    const flatpickrInput = wrapper.find(".flatpickr-input");
-
-    expect(field.attributes().disabled).toBeUndefined();
-    expect(flatpickrInput.attributes().disabled).toBeUndefined();
-  });
-
-  it("should show the dateformat, when no placeholderText is provided", async () => {
-    wrapper = await createWrapper();
-    const flatpickrInput = wrapper.find(".flatpickr-input");
-
-    expect(flatpickrInput.attributes().placeholder).toBe("Y-m-d");
-  });
-
-  it("should show the placeholderText, when provided", async () => {
-    const placeholderText = "Stop! Hammertime!";
-    wrapper = await createWrapper({
-      props: {
-        placeholderText,
-      },
-    });
-    const flatpickrInput = wrapper.find(".flatpickr-input");
-
-    expect(flatpickrInput.attributes().placeholder).toBe(placeholderText);
-  });
-
-  it("should use the admin locale", async () => {
-    wrapper = await createWrapper({
-      props: {
-        locale: "de",
-      },
-    });
-
-    // @ts-expect-error
-    expect(wrapper.vm.$data.flatpickrInstance.config.locale).toBe("de");
-
-    await wrapper.setProps({
-      locale: "en",
-    });
-    await flushPromises();
+    const datepickerInput = wrapper.find(".dp__input");
 
-    // @ts-expect-error
-    expect(wrapper.vm.$data.flatpickrInstance.config.locale).toBe("en");
+    expect(datepickerInput.attributes().disabled).toBeUndefined();
   });
 
-  it("should show the label from the property", async () => {
+  it("is disabled", async () => {
     wrapper = await createWrapper({
       props: {
-        label: "Label from prop",
+        disabled: true,
       },
     });
+    const datepickerInput = wrapper.find(".dp__input");
 
-    expect(wrapper.find("label").text()).toBe("Label from prop");
+    expect(datepickerInput.attributes()).toHaveProperty("disabled");
   });
 
-  it("should not show the actual user timezone as a hint when it is not a datetime", async () => {
-    wrapper = await createWrapper({
-      props: {
-        dateType: "date",
-        timeZone: "Europe/Berlin",
-      },
-    });
-
-    const hint = wrapper.find(".mt-field__hint .mt-icon");
-
-    expect(hint.exists()).toBeFalsy();
-  });
-
-  it("should show the UTC timezone as a hint when no timezone was selected and when datetime is datetime", async () => {
-    wrapper = await createWrapper({
-      props: {
-        dateType: "datetime",
-      },
-    });
-
-    const hint = wrapper.find(".mt-field__hint");
-    const clockIcon = hint.find('[data-testid="mt-icon__solid-clock"]');
-
-    expect(hint.text()).toContain("UTC");
-    expect(clockIcon.isVisible()).toBeTruthy();
-  });
-
-  it("should show the actual user timezone as a hint when datetime is datetime", async () => {
-    wrapper = await createWrapper({
-      props: {
-        timeZone: "Europe/Berlin",
-        dateType: "datetime",
-      },
-    });
-
-    const hint = wrapper.find(".mt-field__hint");
-    const clockIcon = hint.find('[data-testid="mt-icon__solid-clock"]');
+  it("shows the date format as a placeholder when no placeholder is explictly defined", async () => {
+    wrapper = await createWrapper();
+    const datepickerInput = wrapper.find(".dp__input");
 
-    expect(hint.text()).toContain("Europe/Berlin");
-    expect(clockIcon.isVisible()).toBeTruthy();
+    expect(datepickerInput.attributes().placeholder).toBe("Y-m-d ...");
   });
 
-  it("should not show the actual user timezone as a hint when the hideHint property is set to true", async () => {
+  it("shows the placeholder when provided", async () => {
+    const placeholderText = "Stop! Hammertime!";
     wrapper = await createWrapper({
       props: {
-        timeZone: "Europe/Berlin",
-        dateType: "datetime",
-        hideHint: true,
+        placeholder: placeholderText,
       },
     });
+    const datepickerInput = wrapper.find(".dp__input");
 
-    const hint = wrapper.find(".mt-field__hint .mt-icon");
-
-    expect(hint.exists()).toBeFalsy();
+    expect(datepickerInput.attributes().placeholder).toBe(placeholderText);
   });
 
-  it("should not show the actual user timezone as a hint when hideHint is false and dateType is not dateTime", async () => {
-    wrapper = await createWrapper({
-      props: {
-        timeZone: "Europe/Berlin",
-      },
-    });
-
-    const hint = wrapper.find(".mt-field__hint .mt-icon");
 
-    expect(hint.exists()).toBeFalsy();
-  });
-
-  it("should not convert the date when a timezone is set (type=date)", async () => {
-    wrapper = await createWrapper({
-      props: {
-        modelValue: "2023-03-27T00:00:00.000+00:00",
-        dateType: "date",
-        timeZone: "Europe/Berlin",
-      },
-    });
-
-    // Can't test with DOM because of the flatpickr dependency
-    expect(wrapper.vm.timezoneFormattedValue).toBe("2023-03-27T00:00:00.000+00:00");
-  });
-
-  it("should not emit a converted date when a timezone is set (type=date)", async () => {
+  it("should not show the timezone if datepicker is configured for date only", async () => {
     wrapper = await createWrapper({
       props: {
-        modelValue: "2023-03-27T00:00:00.000+00:00",
         dateType: "date",
         timeZone: "Europe/Berlin",
       },
     });
 
-    // can't test with DOM because of the flatpickr dependency
-    wrapper.vm.timezoneFormattedValue = "2023-03-22T00:00:00.000+00:00";
-
-    expect(wrapper.emitted("update:modelValue")?.[0]).toStrictEqual([
-      "2023-03-22T00:00:00.000+00:00",
-    ]);
-  });
-
-  it("should not convert the date when a timezone is set (type=time)", async () => {
-    wrapper = await createWrapper({
-      props: {
-        modelValue: "2023-03-27T00:00:00.000+00:00",
-        dateType: "time",
-        timeZone: "Europe/Berlin",
-      },
-    });
-
-    // Can't test with DOM because of the flatpickr dependency
-    expect(wrapper.vm.timezoneFormattedValue).toBe("2023-03-27T00:00:00.000+00:00");
+    const timeZoneHint = wrapper.find('[data-test="time-zone-hint"]');
+    expect(timeZoneHint.exists()).toBe(false);
   });
 
-  it("should not emit a converted date when a timezone is set (type=time)", async () => {
+  it("should show the timezone if datepicker is configured to datetime", async () => {
     wrapper = await createWrapper({
       props: {
-        modelValue: "2023-03-27T00:00:00.000+00:00",
-        dateType: "time",
         timeZone: "Europe/Berlin",
-      },
-    });
-
-    // can't test with DOM because of the flatpickr dependency
-    wrapper.vm.timezoneFormattedValue = "2023-03-22T00:00:00.000+00:00";
-
-    expect(wrapper.emitted("update:modelValue")?.[0]).toStrictEqual([
-      "2023-03-22T00:00:00.000+00:00",
-    ]);
-  });
-
-  it("should convert the date when a timezone is set (type=datetime)", async () => {
-    wrapper = await createWrapper({
-      props: {
-        modelValue: "2023-03-27T00:00:00.000+00:00",
         dateType: "datetime",
-        timeZone: "Europe/Berlin",
       },
     });
 
-    // Skip this test because data-fns-tz is not working correctly in the test environment
-    // Can't test with DOM because of the flatpickr dependency
-    // expect(wrapper.vm.timezoneFormattedValue).toStrictEqual('2023-03-27T02:00:00.000Z');
+    const timeZoneHint = wrapper.find('[data-test="time-zone-hint"]');
+    expect(timeZoneHint.exists()).toBe(true);
+    expect(timeZoneHint.text()).toBe("Europe/Berlin");
   });
 
-  it("should emit a converted date when a timezone is set (type=datetime)", async () => {
-    wrapper = await createWrapper({
-      props: {
-        modelValue: "2023-03-27T00:00:00.000+00:00",
-        dateType: "datetime",
-        timeZone: "Europe/Berlin",
-      },
-    });
-
-    // can't test with DOM because of the flatpickr dependency
-    wrapper.vm.timezoneFormattedValue = "2023-03-22T00:00:00.000+00:00";
-
-    // 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']);
-  });
 });
diff --git a/packages/component-library/src/components/form/mt-datepicker/mt-datepicker.vue b/packages/component-library/src/components/form/mt-datepicker/mt-datepicker.vue
index 3fd6ec82..5f986c24 100644
--- a/packages/component-library/src/components/form/mt-datepicker/mt-datepicker.vue
+++ b/packages/component-library/src/components/form/mt-datepicker/mt-datepicker.vue
@@ -1,744 +1,517 @@
 <template>
-  <mt-base-field
-    class="mt-field--datepicker"
-    :class="{ 'has--focus': isDatepickerOpen }"
-    v-bind="$attrs"
-    :required="required"
-    :name="formFieldName"
-    :disabled="disabled"
-    :has-focus="isDatepickerOpen"
-    @inheritance-restore="$emit('inheritance-restore', $event)"
-    @inheritance-remove="$emit('inheritance-remove', $event)"
-    v-on="additionalEventListeners"
-  >
-    <!-- eslint-disable-next-line vue/no-template-shadow -->
-    <template #element="{ identification, disabled }">
-      <!-- eslint-disable-next-line vuejs-accessibility/form-control-has-label -->
-      <input
-        :id="identification"
-        ref="flatpickrInput"
-        type="text"
-        autocomplete="off"
-        :name="identification"
-        :disabled="disabled"
-        :placeholder="placeholder"
-      />
-      <mt-icon
-        v-if="!required && timezoneFormattedValue && !disabled"
-        data-testid="mt-datepicker-clear-button"
-        class="mt-field--datepicker__button-reset-value"
-        name="regular-times-xs"
-        @click="unsetValue"
-      />
+  <div class="wrapper">
+    <vue-datepicker
+      ref="datepicker"
+      v-model="computedValue"
+      class="date-picker"
+      position="left"
+      @open="isDatepickerOpen = true"
+      @close="isDatepickerOpen = false"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :required="required"
+      :locale="locale"
+      :timezone="timeZone"
+      :open="isDatepickerOpen"
+      :teleport="true"
+      :show-cancel="true"
+      :clearable="false"
+      :auto-apply="true"
+      :range="range"
+      :format="formatDate"
+      :is-24="is24"
+      :type="dateType"
+      :enable-time-picker="dateType !== 'date'"
+      :exactMatch="dateType === 'date'"
+      time-picker-inline
+    >
+      <template #input-icon>
+        <mt-icon name="regular-calendar" class="regular-calendar" />
+      </template>
+
+      <template #calendar-icon>
+        <mt-icon name="regular-calendar" class="regular-calendar" />
+      </template>
+
+      <template #tp-inline-arrow-up>
+        <mt-icon name="regular-chevron-up-s" class="time-arrow-up-down" />
+      </template>
+
+      <template #tp-inline-arrow-down>
+        <mt-icon name="regular-chevron-down-s" class="time-arrow-up-down" />
+      </template>
+
+      <template #arrow-left>
+        <mt-icon name="regular-chevron-left-xs" class="month-control-arrow" />
+      </template>
+
+      <template #arrow-right>
+        <mt-icon name="regular-chevron-right-xs" class="month-control-arrow" />
+      </template>
+    </vue-datepicker>
+
+    <template v-if="isTimeHintVisible">
+      <div class="field-hint" data-test="time-zone-hint">
+        <mt-icon name="solid-clock" class="field-hint-icon" />
+        <p>{{ timeZone || "UTC" }}</p>
+      </div>
     </template>
-
-    <template v-if="showTimeZoneHint" #field-hint>
-      <mt-icon name="solid-clock" />
-      {{ timeZone }}
-    </template>
-
-    <template #label>
-      {{ label }}
-    </template>
-  </mt-base-field>
+  </div>
 </template>
 
 <script lang="ts">
-import Flatpickr from "flatpickr";
-import "flatpickr/dist/l10n";
-import { zonedTimeToUtc, utcToZonedTime } from "date-fns-tz";
-import "flatpickr/dist/flatpickr.css";
-import MtBaseField from "../_internal/mt-base-field/mt-base-field.vue";
-import MtIcon from "../../icons-media/mt-icon/mt-icon.vue";
-import MtFormFieldMixin from "../../../mixins/form-field.mixin";
 import { defineComponent } from "vue";
-import type { Instance as FlatpickrInstance } from "flatpickr/dist/types/instance";
-
-const allEvents = [
-  "onChange",
-  "onClose",
-  "onDestroy",
-  "onMonthChange",
-  "onOpen",
-  "onYearChange",
-  "onValueUpdate",
-  "onDayCreate",
-  "onParseConfig",
-  "onReady",
-  "onPreCalendarPosition",
-  "onKeyDown",
-];
+import { zonedTimeToUtc } from "date-fns-tz";
+import type { PropType } from "vue";
+import MtIcon from "../../icons-media/mt-icon/mt-icon.vue";
+import DatePicker from "@vuepic/vue-datepicker";
+import "@vuepic/vue-datepicker/dist/main.css";
 
 export default defineComponent({
   name: "MtDatepicker",
 
   components: {
-    "mt-base-field": MtBaseField,
     "mt-icon": MtIcon,
+    "vue-datepicker": DatePicker,
   },
 
-  mixins: [MtFormFieldMixin],
-
   props: {
     /**
-     * A label for the datepicker.
+     * A label for your date picker field. It helps the user understand what this field is for.
      */
     label: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: null,
     },
 
     /**
-     * The locale of the datepicker.
+     * Defines the type of the date picker.
+     * Options: "date" (for selecting a date), or "datetime" (for selecting both).
      */
-    locale: {
-      type: String,
+    dateType: {
+      type: String as PropType<"date" | "datetime">,
       required: false,
-      default: "en",
+      default: "datetime",
     },
 
     /**
-     * The timezone of the datepicker.
+     * Sets the locale for the date picker.
+     * This affects things like the language used for month names and weekdays.
      */
-    timeZone: {
-      type: String,
+    locale: {
+      type: String as PropType<string>,
       required: false,
-      default: "UTC",
+      default: "de",
     },
 
     /**
-     * The value of the datepicker.
+     * Defines the time zone for the date picker.
+     * Useful for adjusting date and time according to a specific timezone.
      */
-    modelValue: {
-      type: String,
+    timeZone: {
+      type: String as PropType<string>,
       required: false,
-      default: null,
+      default: "UTC",
     },
 
     /**
-     * The configuration of the datepicker.
-     * For reference @see https://flatpickr.js.org/options/
+     * The value of the date picker. Can be a single string or an array of strings.
+     * This represents the currently selected date(s).
      */
-    config: {
-      type: Object,
-      default() {
-        return {};
-      },
+    modelValue: {
+      type: [String, Array] as PropType<string | string[]>,
+      default: null,
     },
 
     /**
-     * Configures the type of the datepicker.
+     * Placeholder text to show in the date picker input field when no date is selected.
      */
-    dateType: {
-      type: String,
-      default: "date",
-      validValues: ["time", "date", "datetime"],
-      validator(value: string) {
-        return ["time", "date", "datetime"].includes(value);
-      },
+    placeholder: {
+      type: String as PropType<string>,
+      required: false,
+      default: "Y-m-d ...",
     },
 
     /**
-     * A placeholder text for the datepicker.
+     * Determines if the timepicker is in 24 or 12 hour format
      */
-    placeholderText: {
-      type: String,
-      default: "",
+    is24: {
+      type: Boolean as PropType<boolean>,
       required: false,
+      default: true,
     },
 
     /**
-     * Determines if the datepicker is required.
+     * Determines if the date picker field is required.
+     * If true, the user must select a value before submitting the form.
      */
     required: {
-      type: Boolean,
-      default: false,
+      type: Boolean as PropType<boolean>,
       required: false,
+      default: false,
     },
 
     /**
-     * Determines if the datepicker is disabled.
+     * Determines if the date picker field is disabled.
+     * If true, the user will not be able to interact with the field.
      */
     disabled: {
-      type: Boolean,
-      default: false,
+      type: Boolean as PropType<boolean>,
       required: false,
+      default: false,
     },
 
     /**
-     * Determines if the datepicker should show the timezone hint
+     * Enables the date range selection feature.
+     * If true, the user can select a start and end date.
      */
-    hideHint: {
-      type: Boolean,
-      default: false,
+    range: {
+      type: Boolean as PropType<boolean>,
       required: false,
+      default: false,
     },
   },
 
   data(): {
-    flatpickrInstance: FlatpickrInstance | null;
     isDatepickerOpen: boolean;
-    defaultConfig: Record<string, any>;
+    isTimeHintVisible: boolean;
   } {
     return {
-      flatpickrInstance: null,
       isDatepickerOpen: false,
-      defaultConfig: {},
+      isTimeHintVisible: true,
     };
   },
 
   computed: {
-    flatpickrInputRef() {
-      return this.$refs.flatpickrInput;
-    },
-
-    currentFlatpickrConfig() {
-      if (this.flatpickrInstance === null) {
-        return {};
-      }
-
-      return this.flatpickrInstance.config;
-    },
-
-    placeholder() {
-      if (this.placeholderText.length > 0) {
-        return this.placeholderText;
-      }
-
-      if (this.flatpickrInstance === null) {
-        return this.defaultConfig.altFormat;
-      }
-
-      return this.flatpickrInstance.config.altFormat;
-    },
-
-    noCalendar() {
-      return this.dateType === "time";
-    },
-
-    enableTime() {
-      return this.noCalendar || this.dateType === "datetime";
-    },
-
-    additionalEventListeners() {
-      const listeners: {
-        [key: string]: (...args: any[]) => void;
-      } = {};
-
-      /**
-       * Do not pass "change" or "input" event listeners to the form elements
-       * because the component implements its own listeners for this event types.
-       * The callback methods will emit the corresponding event to the parent.
-       */
-      Object.entries(this.$attrs).forEach(([key, value]) => {
-        // Just look for listeners
-        if (typeof value !== "function") {
-          return;
-        }
-
-        if (!["change", "update:modelValue"].includes(key)) {
-          // @ts-expect-error
-          listeners[key] = this.$attrs[key];
-        }
-      });
-
-      return listeners;
-    },
-
-    timezoneFormattedValue: {
-      get() {
-        if (!this.modelValue) {
-          return null;
-        }
-
-        if (["time", "date"].includes(this.dateType)) {
-          return this.modelValue;
-        }
-
-        // convert from UTC timezone to user timezone (represented as UTC)
-        const timeZoneDate = utcToZonedTime(this.modelValue, this.timeZone);
-
-        // get the time converted to the user timezone
-        return timeZoneDate.toISOString();
+    computedValue: {
+      get(): string | string[] {
+        return this.modelValue;
       },
-      set(newValue: string | null) {
-        if (newValue === null) {
-          this.$emit("update:modelValue", null);
+      set(newValue: Date | [Date, Date] | null) {
+        if (!newValue) return;
+
+        // Handle date conversion for 'date' type
+        if (this.dateType === "date") {
+          const isoFormattedDate = this.convertDateToIso(newValue);
+          console.log(isoFormattedDate);
+          this.$emit("update:modelValue", isoFormattedDate);
           return;
         }
 
-        if (["time", "date"].includes(this.dateType)) {
-          this.$emit("update:modelValue", newValue);
-          return;
-        }
-
-        // convert from user timezone (represented as UTC) to UTC timezone
-        const utcDate = zonedTimeToUtc(new Date(newValue), this.timeZone);
-
-        // emit the UTC time so that the v-model value always work in UTC time (which is needed for the server)
-        this.$emit("update:modelValue", utcDate.toISOString());
+        // Handle 'datetime' type: Convert to UTC first, then to ISO
+        const utcConvertedDate = this.convertLocalToUtc(newValue, this.timeZone);
+        const isoFormattedDate = this.convertDateToIso(utcConvertedDate);
+        console.log(isoFormattedDate);
+        this.$emit("update:modelValue", isoFormattedDate);
       },
     },
-
-    showTimeZoneHint() {
-      return this.dateType === "datetime" && !this.hideHint;
-    },
   },
 
   watch: {
-    config: {
-      deep: true,
-      handler() {
-        this.updateFlatpickrInstance();
-      },
+    dateType(newType) {
+      this.isTimeHintVisible = newType !== "date";
     },
+  },
 
-    dateType() {
-      this.createConfig();
-      this.updateFlatpickrInstance();
-    },
+  methods: {
+    formatDate(date: Date | [Date, Date]): string {
+      // Overide built-in format to y-m-d
+      const formatSingleDate = (d: Date) => {
+        const year = d.getFullYear();
+        const month = String(d.getMonth() + 1).padStart(2, "0");
+        const day = String(d.getDate()).padStart(2, "0");
+        const hours = String(d.getHours()).padStart(2, "0");
+        const minutes = String(d.getMinutes()).padStart(2, "0");
+        return this.dateType === "date"
+          ? `${year}/${month}/${day}`
+          : `${year}/${month}/${day}, ${hours}:${minutes}`;
+      };
 
-    locale: {
-      immediate: true,
-      handler() {
-        this.defaultConfig.locale = this.locale;
-        this.updateFlatpickrInstance();
-      },
+      if (Array.isArray(date)) {
+        return date.map(formatSingleDate).join(" - ");
+      }
+
+      return formatSingleDate(date);
     },
 
-    /**
-     * Watch for changes from parent component and update DOM
-     *
-     * @param newValue
-     */
-    timezoneFormattedValue(newValue) {
-      this.setDatepickerValue(newValue);
+    convertDateToIso(date: Date | [Date, Date]): string | string[] {
+      if (Array.isArray(date)) {
+        return date.map((d) => d.toISOString());
+      } else {
+        return date.toISOString();
+      }
     },
 
-    disabled(isDisabled) {
-      if (!this.flatpickrInstance) {
-        return;
+    convertLocalToUtc(inputDate: Date | [Date, Date], timezone: string): Date | [Date, Date] {
+      // Handle date range conversion
+      if (Array.isArray(inputDate)) {
+        const [startDate, endDate] = inputDate;
+        const startUtcConvertedDate = zonedTimeToUtc(startDate, timezone);
+        const endUtcConvertedDate = zonedTimeToUtc(endDate, timezone);
+        return [startUtcConvertedDate, endUtcConvertedDate];
       }
 
-      this.flatpickrInstance._input.disabled = isDisabled;
+      // Handle single date conversion to UTC
+      return zonedTimeToUtc(inputDate, timezone);
     },
   },
 
-  created() {
-    this.createdComponent();
-  },
-
   mounted() {
-    this.mountedComponent();
+    this.isTimeHintVisible = this.dateType !== "date";
   },
+});
+</script>
 
-  /**
-   * Free up memory
-   */
-  beforeUnmount() {
-    this.beforeDestroyComponent();
-  },
+<style lang="css">
+/* || Datepicker theme  */
+.dp__theme_light {
+  --dp-hover-color: var(--color-interaction-secondary-hover);
+  --dp-primary-color: var(--color-interaction-primary-default);
+  --dp-secondary-color: var(--color-text-primary-disabled);
+  --dp-border-color-hover: var(--color-border-primary-default);
+}
 
-  methods: {
-    createdComponent() {
-      this.createConfig();
-    },
+/* || Datepicker  */
+.dp__main {
+  font-family: var(--font-family-body) !important;
+}
 
-    mountedComponent() {
-      if (this.flatpickrInstance === null) {
-        this.createFlatpickrInstance();
-        return;
-      }
-      this.updateFlatpickrInstance();
-    },
+/* || Input wrapper */
+.dp__input_wrap {
+  font: inherit;
+  font-weight: var(--font-weight-regular) !important;
+  font-size: var(--font-size-xs) !important;
+}
 
-    /**
-     * Free up memory
-     */
-    beforeDestroyComponent() {
-      if (this.flatpickrInstance !== null) {
-        this.flatpickrInstance.destroy();
-        this.flatpickrInstance = null;
-      }
-    },
+.dp__input {
+  height: 48px;
+  padding-left: 1rem !important;
+  border: 1px solid var(--color-border-primary-default);
+  border-radius: var(--border-radius-xs);
+  font: inherit;
+  color: var(--color-text-secondary-default);
+  background: none;
+}
 
-    /**
-     * Update with the new value.
-     *
-     * @param value
-     */
-    setDatepickerValue(value: string | null) {
-      // Make sure we have a flatpickr instance
-      if (this.flatpickrInstance !== null) {
-        // Notify flatpickr instance that there is a change in value
-        this.flatpickrInstance.setDate(value!, false);
-      }
-    },
+.dp__input_icon {
+  position: absolute;
+  width: 48px;
+  height: 100%;
+  left: auto;
+  right: 0px;
+  text-align: center;
+  border-radius: 0 1px 1px 0;
+  padding: 12px;
+  z-index: -9;
+  border-left: 1px solid var(--color-border-primary-default);
+  background: var(--color-background-primary-disabled);
+}
 
-    /**
-     * Merge the newConfig parameter with the defaultConfig and other options.
-     *
-     * @param newConfig
-     * @returns {any}
-     */
-    getMergedConfig(newConfig: any) {
-      if (newConfig.mode !== undefined) {
-        console.warn(
-          "[mt-datepicker] The only allowed mode is the default 'single' mode " +
-            "(the specified mode will be ignored!). " +
-            "The modes 'multiple' or 'range' are currently not supported",
-        );
-      }
+.dp__input_icon #meteor-icon-kit__regular-calendar {
+  color: var(--color-icon-primary-default);
+  width: 16.5px;
+  height: 18px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
 
-      return {
-        ...this.defaultConfig,
-        enableTime: this.enableTime,
-        noCalendar: this.noCalendar,
-        ...newConfig,
-        mode: "single",
-      };
-    },
+.dp__input_focus {
+  border-color: var(--color-border-brand-selected);
+  filter: drop-shadow(0px 0px 3px #189eff4d);
+}
 
-    /**
-     * Update the flatpickr instance with a new config.
-     */
-    updateFlatpickrInstance() {
-      if (this.flatpickrInstance === null) {
-        return;
-      }
+/* || Menu / calendar */
+.dp--menu-wrapper {
+  border-radius: var(--border-radius-s) !important;
+  border: 1px solid var(--color-border-primary-default);
+  font-family: inherit;
+  font-weight: inherit;
+  filter: drop-shadow(0px 1px 3px #0000000f);
+  filter: drop-shadow(0px 1px 3px #0000001a);
+}
 
-      const mergedConfig = this.getMergedConfig(this.config);
-
-      if (
-        mergedConfig.enableTime !== undefined &&
-        // @ts-expect-error
-        mergedConfig.enableTime !== this.currentFlatpickrConfig.enableTime
-      ) {
-        // The instance must be recreated for some config options to take effect like 'enableTime' changes.
-        // See https://github.com/flatpickr/flatpickr/issues/1108 for details.
-        // @ts-expect-error
-        this.createFlatpickrInstance(this.config);
-        return;
-      }
-      // Workaround: Don't allow to pass hooks to configs again otherwise
-      // previously registered hooks will stop working
-      // Notice: we are looping through all events
-      // This also means that new callbacks can not passed once component has been initialized
-      allEvents.forEach((hook) => {
-        delete mergedConfig[hook];
-      });
-
-      // Update the flatpickr config.
-      this.flatpickrInstance.set(mergedConfig);
-
-      // Workaround: Allow to change locale dynamically
-      ["locale", "showMonths"].forEach((name) => {
-        if (typeof mergedConfig[name] !== "undefined") {
-          // @ts-expect-error
-          this.flatpickrInstance.set(name, mergedConfig[name]);
-        }
-      });
-    },
+.dp__arrow_top {
+  left: 24px;
+  border-radius: 3px;
+  border-inline-end: 1px solid var(--color-border-primary-default);
+  border-top: 1px solid var(--color-border-primary-default);
+}
 
-    /**
-     * Create the flatpickr instance. If already one exists it will be recreated.
-     */
-    createFlatpickrInstance() {
-      if (this.flatpickrInstance !== null) {
-        this.flatpickrInstance.destroy();
-        this.flatpickrInstance = null;
-      }
+.dp__instance_calendar {
+  padding: 0.5rem !important;
+}
 
-      const mergedConfig = this.getMergedConfig(this.config);
-
-      // Set event hooks in config.
-      this.getEventNames().forEach(({ kebabCase, camelCase }) => {
-        // @ts-expect-error
-        mergedConfig[camelCase] = (...args) => {
-          this.$emit(kebabCase, ...args);
-        };
-      });
-
-      // @ts-expect-error
-      // Init flatpickr only if it is not already loaded.
-      this.flatpickrInstance = new Flatpickr(
-        // @ts-expect-error
-        this.flatpickrInputRef,
-        mergedConfig,
-      ) as unknown as FlatpickrInstance;
-      this.flatpickrInstance.config.onOpen.push(() => {
-        this.isDatepickerOpen = true;
-      });
-
-      this.flatpickrInstance.config.onClose.push((...args) => {
-        this.emitValue(args[1]);
-        this.isDatepickerOpen = false;
-      });
-
-      this.flatpickrInstance.config.onChange.push((...args) => {
-        this.emitValue(args[1]);
-      });
-
-      // Set the right datepicker value from the property.
-      const initialValue = this.timezoneFormattedValue
-        ? this.timezoneFormattedValue
-        : new Date().toISOString();
-      this.setDatepickerValue(initialValue);
-    },
+.dp__menu_inner {
+  padding: 0px;
+}
 
-    /**
-     * Convert the events for the date picker to another format:
-     * from: 'on-month-change' to: { camelCase: 'onMonthChange', kebabCase: 'on-month-change' }
-     * So this can be used as a parameter to flatpickr to specify which events will be thrown
-     * and also emit the right event from vue.
-     *
-     * @returns {Array}
-     */
-    getEventNames() {
-      const events: {
-        kebabCase: string;
-        camelCase: string;
-      }[] = [];
-
-      Object.keys(this.additionalEventListeners).forEach((event) => {
-        events.push({
-          kebabCase: event,
-          camelCase: this.kebabToCamel(event),
-        });
-      });
-
-      return events;
-    },
+.no-border-bottom {
+  padding-bottom: 0 !important;
+}
 
-    /**
-     * Opens the datepicker.
-     */
-    openDatepicker() {
-      this.$nextTick(() => {
-        // @ts-expect-error
-        this.flatpickrInstance.open();
-      });
-    },
+.dp--header-wrap {
+  font: inherit;
+  font-weight: var(--font-weight-semibold) !important;
+  font-size: var(--font-size-xs) !important;
+}
 
-    /**
-     * Get a camel case ("camelCase") string from a kebab case ("kebab-case") string.
-     *
-     * @param string
-     * @returns {*}
-     */
-    kebabToCamel(string: string) {
-      return string.replace(/-([a-z])/g, (m, g1) => g1.toUpperCase());
-    },
+.dp__month_year_select {
+  color: var(--color-text-primary-default);
+}
 
-    unsetValue() {
-      this.$nextTick(() => {
-        this.emitValue(null);
-      });
-    },
+.month-control-arrow {
+  color: var(--color-icon-primary-default);
+}
 
-    emitValue(value: string | null) {
-      // Prevent emitting an empty date, to reset a date, null should be emitted
-      if (value === "") {
-        value = null;
-      }
+.dp__overlay {
+  border-radius: var(--border-radius-m);
+  font: inherit;
+  font-weight: var(--font-weight-regular) !important;
+  font-size: var(--font-size-xs) !important;
+}
 
-      // Prevent emit if value is already up to date
-      if (value === this.timezoneFormattedValue) {
-        return;
-      }
+.back-to-calendar svg {
+  width: 1.2rem !important;
+  color: var(--color-text-primary-default);
+}
 
-      this.timezoneFormattedValue = value;
-    },
+.dp__calendar_header {
+  font: inherit;
+  color: var(--color-text-primary-default);
+  font-weight: var(--font-weight-medium) !important;
+  font-size: var(--font-size-xs) !important;
+}
 
-    createConfig() {
-      let dateFormat = "Y-m-dTH:i:S";
-      let altFormat = "Y-m-d H:i";
+.dp__calendar_header_separator {
+  display: none;
+}
 
-      if (this.dateType === "time") {
-        dateFormat = "H:i:S";
-        altFormat = "H:i";
-      }
+.dp__cell_inner {
+  font: inherit;
+  font-size: var(--font-size-xs) !important;
+  font-weight: var(--font-weight-regular) !important;
+}
 
-      if (this.dateType === "date") {
-        altFormat = "Y-m-d";
-      }
+.dp__cell_inner:hover {
+  background: var(--color-interaction-secondary-hover);
+  color: var(--color-text-primary-default);
+}
 
-      this.defaultConfig = {
-        time_24hr: true,
-        locale: this.locale,
-        dateFormat,
-        altInput: true,
-        altFormat,
-        allowInput: true,
-      };
-    },
-  },
-});
-</script>
+.dp__active_date {
+  background: var(--color-interaction-primary-default);
+  color: var(--color-text-static-default);
+}
 
-<style lang="scss">
-$mt-datepicker-color-border: $color-gray-300;
-$mt-datepicker-color-font: $color-darkgray-200;
-$mt-datepicker-color-disabled-font: #b3bfcc;
-$mt-datepicker-color-hover: $color-shopware-brand-500;
-$mt-datepicker-color-selected: #e6e6e6;
-$mt-datepicker-color-text-selected: $color-white;
-
-@mixin flatpickr-day-hovered {
-  color: $mt-datepicker-color-text-selected;
-  background-color: $mt-datepicker-color-hover;
-  border-color: $color-shopware-brand-500;
-}
-
-.mt-field--datepicker {
-  .mt-field__hint {
-    svg#meteor-icon-kit__solid-clock {
-      width: 12px;
-      height: 12px;
-    }
-  }
-
-  .mt-block-field__block {
-    position: relative;
-  }
-
-  .mt-field--datepicker__button-reset-value {
-    position: absolute;
-    cursor: pointer;
-    right: 14px;
-    top: 19px;
-  }
-
-  &.mt-field--small {
-    .mt-field--datepicker__button-reset-value {
-      top: 7px;
-    }
-  }
-
-  &.mt-field--medium {
-    .mt-field--datepicker__button-reset-value {
-      top: 12px;
-    }
-  }
-}
-
-.flatpickr-calendar {
-  color: $mt-datepicker-color-font;
-  box-shadow: 0 3px 6px 0 rgba(120, 138, 155, 0.3);
-  border: 1px solid $mt-datepicker-color-border;
-  border-radius: 4px;
-
-  &::before,
-  &::after {
+.dp__today {
+  border: 1px solid var(--color-border-primary-default);
+}
+
+/* #meteor-icon-kit__regular-calendar {
+    width: 22px;
+    height: 24px;
     display: none;
-  }
-
-  .flatpickr-months {
-    padding-top: 8px;
-    padding-bottom: 16px;
-
-    .flatpickr-monthDropdown-months {
-      padding-top: 2px;
-      padding-bottom: 4px;
-      font-weight: var(--font-weight-semi-bold);
-      color: $color-darkgray-200;
-      text-align: right;
-      -moz-appearance: none;
-      -webkit-appearance: none;
-      line-height: 1.2;
-
-      option {
-        font-weight: var(--font-weight-regular);
-      }
-    }
+} */
 
-    .flatpickr-prev-month,
-    .flatpickr-next-month {
-      top: 8px;
+/* || Time picker */
+.dp__time_picker_inline_container {
+  padding-top: 5px;
+}
 
-      &:hover {
-        svg {
-          fill: $color-shopware-brand-500;
-        }
-      }
-    }
-
-    .cur-year {
-      color: $color-darkgray-200;
-    }
-  }
-
-  .flatpickr-current-month {
-    display: flex;
-
-    .numInputWrapper,
-    .flatpickr-monthDropdown-months {
-      flex: 1;
-    }
-  }
-
-  .flatpickr-weekday {
-    font-size: inherit;
-    color: inherit;
-    font-weight: 400;
-  }
-
-  .flatpickr-day {
-    border-radius: 4px;
-    margin-bottom: 6px;
-
-    &:not(.flatpickr-disabled) {
-      color: $mt-datepicker-color-font;
-    }
-
-    &:hover {
-      @include flatpickr-day-hovered;
-    }
-
-    &.selected {
-      background-color: $mt-datepicker-color-selected;
-      border-color: $mt-datepicker-color-border;
-
-      &:hover {
-        @include flatpickr-day-hovered;
-      }
-    }
+.dp__flex {
+  width: 100%;
+  border-top: 1px solid var(--color-border-primary-default) !important;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
 
-    &.prevMonthDay,
-    &.nextMonthDay {
-      &:not(.flatpickr-disabled) {
-        color: $mt-datepicker-color-disabled-font;
-      }
+.dp__time_input {
+  width: 100%;
+  justify-content: space-between;
+  padding-left: 35px;
+  padding-right: 35px;
+}
 
-      &:hover {
-        @include flatpickr-day-hovered;
-      }
-    }
+.dp__time_display {
+  font-family: var(--font-family-body) !important;
+  font-weight: var(--font-weight-regular) !important;
+  font-size: var(--font-size-xs) !important;
+}
 
-    &.today {
-      border-color: $color-gray-300;
+.dp__inc_dec_button_inline {
+  opacity: 0;
+  justify-content: center;
+}
 
-      &:hover {
-        @include flatpickr-day-hovered;
-      }
+.dp__inc_dec_button_inline:hover {
+  opacity: 1;
+}
 
-      &.selected {
-        background-color: $mt-datepicker-color-selected;
+.time-arrow-up-down {
+  color: var(--color-border-primary-default);
+}
 
-        &:hover {
-          @include flatpickr-day-hovered;
-        }
-      }
-    }
+.dp__overlay {
+  font-family: var(--font-family-body) !important;
+  font-weight: var(--font-weight-regular) !important;
+  font-size: var(--font-size-xs) !important;
+}
+
+.dp__overlay_container {
+  font: inherit;
+}
+
+.dp--overlay-relative {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
 
-    &.startRange {
-      border-radius: 4px 0 0 4px;
-    }
+.dp__button.dp__overlay_action {
+  position: absolute;
+  bottom: 0;
+}
+
+.dp__button.dp__overlay_action span {
+  display: none;
+}
+
+.dp__icon {
+  display: none;
+}
+
+.dp__button.dp__overlay_action::before {
+  content: "+";
+  font: inherit;
+  font-weight: var(--font-weight-light) !important;
+  font-size: var(--font-size-xl) !important;
+  transform: rotate(45deg);
+  color: var(--color-text-secondary-default);
+}
+
+.dp--clear-btn {
+  display: absolute;
+  z-index: 9999;
+  background: red;
+}
+
+/* || Field hint */
+.field-hint {
+  margin-top: 4px;
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-xs);
+  font-family: var(--font-family-body);
+  color: var(--color-text-tertiary-default);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
 
-    &.endRange {
-      border-radius: 0 4px 4px 0;
-    }
-  }
+.field-hint .field-hint-icon svg#meteor-icon-kit__solid-clock {
+  width: 12px;
+  height: 12px;
 }
 </style>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 509d7237..4c1ad652 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -297,6 +297,9 @@ importers:
       '@testing-library/vue':
         specifier: ^8.1.0
         version: 8.1.0(@vue/compiler-sfc@3.4.29)(vue@3.4.21(typescript@5.2.2))
+      '@vuepic/vue-datepicker':
+        specifier: ^9.0.3
+        version: 9.0.3(vue@3.4.21(typescript@5.2.2))
       '@vueuse/components':
         specifier: ^10.7.2
         version: 10.11.0(vue@3.4.21(typescript@5.2.2))
@@ -4506,6 +4509,12 @@ packages:
   '@vue/tsconfig@0.4.0':
     resolution: {integrity: sha512-CPuIReonid9+zOG/CGTT05FXrPYATEqoDGNrEaqS4hwcw5BUNM2FguC0mOwJD4Jr16UpRVl9N0pY3P+srIbqmg==}
 
+  '@vuepic/vue-datepicker@9.0.3':
+    resolution: {integrity: sha512-OtCAKG+CkVBpCwnPx7/BGRF+/z+jDzNl2cMBpcr8j2NkAN+13xkUt7sctbOVKbG/jhuXtKoUSedI69e0cDXPXw==}
+    engines: {node: '>=18.12.0'}
+    peerDependencies:
+      vue: '>=3.2.0'
+
   '@vueuse/components@10.11.0':
     resolution: {integrity: sha512-ZvLZI23d5ZAtva5fGyYh/jQtZO8l+zJ5tAXyYNqHJZkq1o5yWyqZhENvSv5mfDmN5IuAOp4tq02mRmX/ipFGcg==}
 
@@ -5905,6 +5914,9 @@ packages:
     resolution: {integrity: sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==}
     engines: {node: '>=0.11'}
 
+  date-fns@3.6.0:
+    resolution: {integrity: sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==}
+
   db0@0.1.4:
     resolution: {integrity: sha512-Ft6eCwONYxlwLjBXSJxw0t0RYtA5gW9mq8JfBXn9TtC0nDPlqePAhpv9v4g9aONBi6JI1OXHTKKkUYGd+BOrCA==}
     peerDependencies:
@@ -6711,6 +6723,7 @@ packages:
   eslint@8.57.0:
     resolution: {integrity: sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    deprecated: This version is no longer supported. Please see https://eslint.org/version-support for other options.
     hasBin: true
 
   esm-resolve@1.0.11:
@@ -10479,7 +10492,7 @@ packages:
   puppeteer@12.0.1:
     resolution: {integrity: sha512-YQ3GRiyZW0ddxTW+iiQcv2/8TT5c3+FcRUCg7F8q2gHqxd5akZN400VRXr9cHQKLWGukmJLDiE72MrcLK9tFHQ==}
     engines: {node: '>=10.18.1'}
-    deprecated: < 21.8.0 is no longer supported
+    deprecated: < 22.6.4 is no longer supported
 
   pure-color@1.3.0:
     resolution: {integrity: sha512-QFADYnsVoBMw1srW7OVKEYjG+MbIa49s54w1MA1EDY6r2r/sTcKKYqRX1f4GYvnXP7eN/Pe9HFcX+hwzmrXRHA==}
@@ -19517,6 +19530,11 @@ snapshots:
 
   '@vue/tsconfig@0.4.0': {}
 
+  '@vuepic/vue-datepicker@9.0.3(vue@3.4.21(typescript@5.2.2))':
+    dependencies:
+      date-fns: 3.6.0
+      vue: 3.4.21(typescript@5.2.2)
+
   '@vueuse/components@10.11.0(vue@3.4.21(typescript@5.2.2))':
     dependencies:
       '@vueuse/core': 10.11.0(vue@3.4.21(typescript@5.2.2))
@@ -21171,6 +21189,8 @@ snapshots:
     dependencies:
       '@babel/runtime': 7.24.7
 
+  date-fns@3.6.0: {}
+
   db0@0.1.4: {}
 
   de-indent@1.0.2: {}