diff --git a/packages/ui/src/lib/index.ts b/packages/ui/src/lib/index.ts
index d033584c..2181661d 100644
--- a/packages/ui/src/lib/index.ts
+++ b/packages/ui/src/lib/index.ts
@@ -107,6 +107,7 @@ export * from '$lib/services/modal-manager.svelte.js';
 export * from '$lib/services/theme.svelte.js';
 export * from '$lib/services/toast-manager.svelte.js';
 export * from '$lib/services/translation.svelte.js';
+export * from '$lib/state/locale-state.svelte.js';
 export * from '$lib/types.js';
 export * from '$lib/utilities/byte-units.js';
 export * from '$lib/utilities/common.js';
diff --git a/packages/ui/src/lib/internal/DatePicker.svelte b/packages/ui/src/lib/internal/DatePicker.svelte
index 874a1875..7138909f 100644
--- a/packages/ui/src/lib/internal/DatePicker.svelte
+++ b/packages/ui/src/lib/internal/DatePicker.svelte
@@ -4,6 +4,7 @@
   import IconButton from '$lib/components/IconButton/IconButton.svelte';
   import Label from '$lib/components/Label/Label.svelte';
   import { zIndex } from '$lib/constants.js';
+  import { getLocale } from '$lib/state/locale-state.svelte.js';
   import { styleVariants } from '$lib/styles.js';
   import type { Shape, Size } from '$lib/types.js';
   import { cleanClass, generateId } from '$lib/utilities/internal.js';
@@ -75,6 +76,7 @@
     maxValue={maxDate}
     bind:value={date}
     readonly={readOnly}
+    locale={getLocale()}
     {disabled}
   >
     <DatePicker.Input
diff --git a/packages/ui/src/lib/state/locale-state.svelte.ts b/packages/ui/src/lib/state/locale-state.svelte.ts
new file mode 100644
index 00000000..6e2a386b
--- /dev/null
+++ b/packages/ui/src/lib/state/locale-state.svelte.ts
@@ -0,0 +1,6 @@
+let locale = $state<string>();
+
+export const getLocale = () => locale;
+export const setLocale = (newLocale: string) => {
+  locale = newLocale;
+};