diff --git a/addon/components/single-document-details.hbs b/addon/components/single-document-details.hbs
index a18e4189..e7dcc83f 100644
--- a/addon/components/single-document-details.hbs
+++ b/addon/components/single-document-details.hbs
@@ -100,7 +100,7 @@
         id="date"
         name="date"
         class="uk-input"
-        @locale={{this.locale}}
+        @locale={{this.flatpickrLocale}}
         @date={{or @document.date null}}
         @altFormat={{this.dateFormat}}
         @altInput={{true}}
diff --git a/addon/components/single-document-details.js b/addon/components/single-document-details.js
index dfbd8640..7c50f248 100644
--- a/addon/components/single-document-details.js
+++ b/addon/components/single-document-details.js
@@ -2,6 +2,7 @@ import { action } from "@ember/object";
 import { inject as service } from "@ember/service";
 import { tracked } from "@glimmer/tracking";
 import { restartableTask, dropTask } from "ember-concurrency";
+import lang from "flatpickr/dist/l10n";
 import { DateTime } from "luxon";
 
 import DocumentCard from "./document-card";
@@ -24,12 +25,19 @@ export default class SingleDocumentDetailsComponent extends DocumentCard {
   @tracked editDate = false;
   @tracked validTitle = true;
 
+  get locale() {
+    return this.intl.primaryLocale.split("-")[0];
+  }
+
+  get flatpickrLocale() {
+    return lang[this.locale];
+  }
+
   get dateFormat() {
-    const language = this.intl.primaryLocale.split("-")[0];
     const defaultFormat = "m/d/Y";
     const formats = { de: "d.m.Y", fr: "d.m.Y", en: defaultFormat };
 
-    return formats[language] ?? defaultFormat;
+    return formats[this.locale] ?? defaultFormat;
   }
 
   get displayConvertButton() {
diff --git a/app/styles/ember-alexandria.scss b/app/styles/ember-alexandria.scss
index c6895fd4..b7c98726 100644
--- a/app/styles/ember-alexandria.scss
+++ b/app/styles/ember-alexandria.scss
@@ -2,6 +2,8 @@
 @import "custom-uikit-rules";
 @import "ember-uikit";
 @import "skeleton-loading";
+@import "flatpickr/dist/flatpickr";
+@import "flatpickr/dist/themes/airbnb";
 
 $tag-hover-shadow: 0 2px 8px rgba(0 0 0 / 20%);
 
diff --git a/package.json b/package.json
index 81f33e6e..4be774f3 100644
--- a/package.json
+++ b/package.json
@@ -53,7 +53,7 @@
     "ember-data-resources": "^5.2.1",
     "ember-engines-router-service": "^0.5.1",
     "ember-fetch": "^8.1.2",
-    "ember-flatpickr": "^4.0.0",
+    "ember-flatpickr": "^7.1.0",
     "ember-intl": "^6.4.1",
     "ember-localized-model": "^3.2.2",
     "ember-modifier": "^4.1.0",
@@ -63,6 +63,7 @@
     "ember-truth-helpers": "^4.0.3",
     "ember-uikit": "^9.0.0",
     "file-saver": "^2.0.5",
+    "flatpickr": "^4.6.13",
     "luxon": "^3.4.4"
   },
   "devDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b34eaf04..0de27f89 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -69,8 +69,8 @@ dependencies:
     specifier: ^8.1.2
     version: 8.1.2
   ember-flatpickr:
-    specifier: ^4.0.0
-    version: 4.0.0(@babel/core@7.23.9)(@glint/template@1.2.2)(ember-source@5.6.0)
+    specifier: ^7.1.0
+    version: 7.1.0(@babel/core@7.23.9)(@glint/template@1.2.2)(ember-source@5.6.0)(flatpickr@4.6.13)(webpack@5.90.3)
   ember-intl:
     specifier: ^6.4.1
     version: 6.4.1(@babel/core@7.23.9)(@glint/template@1.2.2)(typescript@5.3.3)(webpack@5.90.3)
@@ -98,6 +98,9 @@ dependencies:
   file-saver:
     specifier: ^2.0.5
     version: 2.0.5
+  flatpickr:
+    specifier: ^4.6.13
+    version: 4.6.13
   luxon:
     specifier: ^3.4.4
     version: 3.4.4
@@ -7163,27 +7166,23 @@ packages:
       - supports-color
     dev: false
 
-  /ember-flatpickr@4.0.0(@babel/core@7.23.9)(@glint/template@1.2.2)(ember-source@5.6.0):
-    resolution: {integrity: sha512-NWCGFZENEcJ5GgtkuAtlAad3uyik4E0wD+/k40tNrlNd+XcGdMVQ4t90ku3GwfTrH9gNR5iq5LajL0dzA5Uhrw==}
-    engines: {node: 14.* || 16.* || >= 18}
+  /ember-flatpickr@7.1.0(@babel/core@7.23.9)(@glint/template@1.2.2)(ember-source@5.6.0)(flatpickr@4.6.13)(webpack@5.90.3):
+    resolution: {integrity: sha512-EnjwaHAUxH1Z5cBjDgUQwR4GTMI+8tlphH4CzKTYhbwIaESUTlNGmHXYR/D4T8RSzF/Sp0Wm0F3+309NqUUQew==}
+    engines: {node: 18.* || >= 20, pnpm: ^8.14.1}
     peerDependencies:
-      ember-source: ^3.28.0 || ^4.0.0
+      ember-source: ^4.8.0 || ^5.0.0
+      flatpickr: ^4.0.0
     dependencies:
       '@ember/render-modifiers': 2.1.0(@babel/core@7.23.9)(@glint/template@1.2.2)(ember-source@5.6.0)
-      '@glimmer/component': 1.1.2(@babel/core@7.23.9)
-      '@glimmer/tracking': 1.1.2
-      broccoli-funnel: 3.0.8
-      broccoli-merge-trees: 4.2.0
-      broccoli-stew: 3.0.0
-      ember-cli-babel: 7.26.11
-      ember-cli-htmlbars: 6.3.0
-      ember-cli-typescript: 5.2.1
+      '@ember/test-helpers': 3.3.0(@glint/template@1.2.2)(ember-source@5.6.0)(webpack@5.90.3)
+      '@embroider/addon-shim': 1.8.7
       ember-source: 5.6.0(@babel/core@7.23.9)(@glimmer/component@1.1.2)(@glint/template@1.2.2)(rsvp@4.8.5)(webpack@5.90.3)
       flatpickr: 4.6.13
     transitivePeerDependencies:
       - '@babel/core'
       - '@glint/template'
       - supports-color
+      - webpack
     dev: false
 
   /ember-focus-trap@1.1.0(ember-source@5.6.0):