diff --git a/docs/DemoLayout.vue b/docs/DemoLayout.vue
index 1a4eb49..d552efe 100644
--- a/docs/DemoLayout.vue
+++ b/docs/DemoLayout.vue
@@ -1,3 +1,7 @@
+<script setup>
+import 'dayjs/locale/fr'
+</script>
+
 <template>
   <div class="vp-raw">
     <div class="flex flex-col items-center justify-center">
diff --git a/docs/advanced-features.md b/docs/advanced-features.md
index dfdb514..c2ada1b 100644
--- a/docs/advanced-features.md
+++ b/docs/advanced-features.md
@@ -167,7 +167,7 @@ This means you only import the specific locale you need directly into your proje
 
 <DemoLayout>
   <VueTailwindDatePicker
-    i18n="id"
+    i18n="fr"
     :auto-apply="false"
     :options="options"
     v-model="dateValue5"
diff --git a/src/VueTailwindDatePicker.vue b/src/VueTailwindDatePicker.vue
index 6ca00b3..2381661 100644
--- a/src/VueTailwindDatePicker.vue
+++ b/src/VueTailwindDatePicker.vue
@@ -1257,6 +1257,9 @@ watchEffect(() => {
   }
 })
 
+dayjs.locale(props.i18n)
+watch(() => props.i18n, () => dayjs.locale(props.i18n))
+
 watchEffect(() => {
   const locale = props.i18n
   const modelValueCloned = props.modelValue