diff --git a/package-lock.json b/package-lock.json
index 3a656b36f1..f435823cd8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -39,6 +39,7 @@
         "color-string": "^2.1.4",
         "core-js": "^3.49.0",
         "css-color-names": "^1.0.1",
+        "datetime-locale-patterns": "^1.0.2",
         "debounce": "^3.0.0",
         "linkifyjs": "^4.3.3",
         "md5": "^2.3.0",
@@ -5305,6 +5306,32 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/cldr-core": {
+      "version": "44.0.1",
+      "resolved": "https://registry.npmjs.org/cldr-core/-/cldr-core-44.0.1.tgz",
+      "integrity": "sha512-k+Mgsb/VbCYCJHhdL/ej+qyNNFs9OB8fOmi/tpa8L+vkbX3ksn1MizUtToKU827Y1XUfT0TAaybmLA+7cEqx7Q==",
+      "license": "Unicode-DFS-2016",
+      "peer": true
+    },
+    "node_modules/cldr-dates-full": {
+      "version": "44.0.1",
+      "resolved": "https://registry.npmjs.org/cldr-dates-full/-/cldr-dates-full-44.0.1.tgz",
+      "integrity": "sha512-sX49WhLL0jQKRtMyzlfOLV52vTvEMkHwRS93EI9q50M4hMQ1gAEGaGbxZ2rhxRjGqOamtFm4juzsNjs0QmV71Q==",
+      "license": "Unicode-DFS-2016",
+      "peerDependencies": {
+        "cldr-numbers-full": "44.0.1"
+      }
+    },
+    "node_modules/cldr-numbers-full": {
+      "version": "44.0.1",
+      "resolved": "https://registry.npmjs.org/cldr-numbers-full/-/cldr-numbers-full-44.0.1.tgz",
+      "integrity": "sha512-LNJNApoY7yRxSqvYPKRbe9sPdUSmeDHZRaC30nRo55QSv2fQB2jS5FBq0CJ36jGxfPNoUp37BEEUztC2qoVO5w==",
+      "license": "Unicode-DFS-2016",
+      "peer": true,
+      "peerDependencies": {
+        "cldr-core": "44.0.1"
+      }
+    },
     "node_modules/clone": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
@@ -5820,6 +5847,23 @@
         "url": "https://github.com/sponsors/kossnocorp"
       }
     },
+    "node_modules/datetime-locale-patterns": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/datetime-locale-patterns/-/datetime-locale-patterns-1.0.2.tgz",
+      "integrity": "sha512-bJE4d+9iahjytniDzAuJk+dky33+CaD09R7aCj59vIvgIlGhfT+0CBuQFwDYuG2M61luNKRj3x9XjPLMsOVrkw==",
+      "license": "MIT",
+      "dependencies": {
+        "cldr-dates-full": "44.0.1"
+      },
+      "bin": {
+        "date-locale-pattern": "bin/date-locale-pattern.js",
+        "datetime-locale-pattern": "bin/datetime-locale-pattern.js",
+        "time-locale-pattern": "bin/time-locale-pattern.js"
+      },
+      "engines": {
+        "node": ">=16.14"
+      }
+    },
     "node_modules/debounce": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/debounce/-/debounce-3.0.0.tgz",
diff --git a/package.json b/package.json
index f481150f23..9374a0b248 100644
--- a/package.json
+++ b/package.json
@@ -66,6 +66,7 @@
     "color-string": "^2.1.4",
     "core-js": "^3.49.0",
     "css-color-names": "^1.0.1",
+    "datetime-locale-patterns": "^1.0.2",
     "debounce": "^3.0.0",
     "linkifyjs": "^4.3.3",
     "md5": "^2.3.0",
diff --git a/src/components/Shared/DatePicker.vue b/src/components/Shared/DatePicker.vue
index 136e567b5c..c72ca23164 100644
--- a/src/components/Shared/DatePicker.vue
+++ b/src/components/Shared/DatePicker.vue
@@ -4,6 +4,13 @@
 -->
 
 <template>
+	<!--
+	`format` is specified as a workaround for https://github.com/nextcloud/calendar/issues/8307
+	until the issue is fixed in `@nextcloud/vue`.
+
+	This works because `@vuepic/vue-datepicker` can use it to parse text inputs from the user
+	when providing a format as pattern string (and not a one-way function).
+	-->
 	<DateTimePicker
 		id="date-time-picker-input"
 		:min="minimumDate"
@@ -12,17 +19,22 @@
 		:type="type"
 		:hideLabel="true"
 		class="date-time-picker"
+		:format="formatStr"
 		@blur="onBlur"
 		@update:modelValue="onInput" />
 </template>
 
 <script>
+import { getCanonicalLocale } from '@nextcloud/l10n'
 import {
 	NcDateTimePicker as DateTimePicker,
 } from '@nextcloud/vue'
+import { getDateLocalePattern, getDateTimeLocalePattern, getTimeLocalePattern } from 'datetime-locale-patterns'
 import { mapStores } from 'pinia'
 import useDavRestrictionsStore from '../../store/davRestrictions.js'
 
+const canonicalLocale = getCanonicalLocale()
+
 export default {
 	name: 'DatePicker',
 	components: {
@@ -91,6 +103,28 @@ export default {
 
 			return this.max || new Date(this.davRestrictionsStore.maximumDate)
 		},
+
+		/**
+		 * Returns the date format pattern for the current picker type.
+		 *
+		 * See https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table
+		 *
+		 * @return {string | undefined} A format pattern or `undefined` to use the default `NcDateTimePicker` formatting.
+		 */
+		formatStr() {
+			// Match logic from https://github.com/nextcloud-libraries/nextcloud-vue/blob/v9.8.0/src/components/NcDateTimePicker/NcDateTimePicker.vue#L549
+			if (this.type === 'date' || this.type === 'date-range') {
+				return getDateLocalePattern(canonicalLocale, { dateStyle: 'medium' })
+			} else if (this.type === 'time' || this.type === 'time-range') {
+				return getTimeLocalePattern(canonicalLocale, { timeStyle: 'short' })
+			} else if (this.type === 'datetime' || this.type === 'datetime-range') {
+				return getDateTimeLocalePattern(canonicalLocale, { dateStyle: 'medium', timeStyle: 'short' })
+			} else {
+				// 'datetime-locale-patterns' does not support `month` and `year`.
+				// So fall back to default formatting.
+				return undefined
+			}
+		},
 	},
 
 	methods: {