diff --git a/src/VueDatePicker/components/shared/YearModePicker.vue b/src/VueDatePicker/components/shared/YearModePicker.vue
index abe36331..d48f40d1 100644
--- a/src/VueDatePicker/components/shared/YearModePicker.vue
+++ b/src/VueDatePicker/components/shared/YearModePicker.vue
@@ -20,8 +20,8 @@
             @click="() => toggleYearPicker(false)"
             @keydown.enter="() => toggleYearPicker(false)"
         >
-            <slot v-if="$slots.year" name="year" :year="year" />
-            <template v-if="!$slots.year">{{ year }}</template>
+            <slot v-if="$slots.year" name="year" :year="year" :text="yearDisplayVal" :value="year" />
+            <template v-if="!$slots.year">{{ yearDisplayVal }}</template>
         </button>
         <ArrowBtn
             v-if="showRightIcon(defaultedMultiCalendars, instance)"
@@ -69,7 +69,8 @@
     import { useCommon, useDefaults, useTransitions } from '@/composables';
     import { PickerBaseProps } from '@/props';
 
-    import { type PropType, ref } from 'vue';
+    import { type PropType, ref, computed } from 'vue';
+    import { formatNumber } from '@/utils/util';
     import type { OverlayGridItem } from '@/interfaces';
 
     const emit = defineEmits(['toggle-year-picker', 'year-select', 'handle-year']);
@@ -89,6 +90,8 @@
 
     const overlayOpen = ref(false);
 
+    const yearDisplayVal = computed((): string => formatNumber(props.year, props.locale));
+
     const toggleYearPicker = (flow = false, show?: boolean) => {
         overlayOpen.value = !overlayOpen.value;
         emit('toggle-year-picker', { flow, show });