diff --git a/src/components/base/DatepickerButton.vue b/src/components/base/DatepickerButton.vue
index 8e48a62d9..921e6165e 100644
--- a/src/components/base/DatepickerButton.vue
+++ b/src/components/base/DatepickerButton.vue
@@ -2,7 +2,8 @@
   <div
     class="b-form-btn-label-control dropdown b-form-datepicker btn-group wrapper"
     :lang="props.locale"
-    :aria-labelledby="`${uid}-value`">
+    :aria-labelledby="`${uid}-value`"
+  >
     <button
       type="button"
       aria-haspopup="dialog"
@@ -10,29 +11,49 @@
       class="btn dropdown-toggle dropdown-toggle-no-caret"
       :class="buttonClasses"
       @click="handleClick"
-      @mouseenter="isHover = true" @mouseleave="isHover = false">
+      @mouseenter="isHover = true"
+      @mouseleave="isHover = false"
+    >
       <svg
-        viewBox="0 0 16 16" width="1em" height="1em" focusable="false" role="img" aria-label="calendar"
-        aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" :class="iconClasses">
+        viewBox="0 0 16 16"
+        width="1em"
+        height="1em"
+        focusable="false"
+        role="img"
+        aria-label="calendar"
+        aria-hidden="true"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="currentColor"
+        :class="iconClasses"
+      >
         <g>
           <path
-            d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z">
-          </path>
+            d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"
+          ></path>
         </g>
       </svg>
     </button>
-    <input type="date" :required="props.required" :min="minDate" :max="maxDate" :id="`${uid}-value`" :value="props.value" @input="handleInput" style="width: 0px; height: 0px; border: 0px; margin: 0px; padding: 0px;" ref="dateInput"/>
+    <input
+      type="date"
+      :required="props.required"
+      :min="minDate"
+      :max="maxDate"
+      :id="`${uid}-value`"
+      :value="props.value"
+      @input="handleInput"
+      style="width: 0px; height: 0px; border: 0px; margin: 0px; padding: 0px"
+      ref="dateInput"
+    />
   </div>
 </template>
 
-
 <script setup lang="ts">
 import { v4 } from 'uuid'
 import { computed, ref } from 'vue'
 
 const props = defineProps({
-  value: {
-    type: [Date, String],
+  modelValue: {
+    type: [Date, String]
   },
   locale: {
     type: String,
@@ -43,10 +64,10 @@ const props = defineProps({
     default: 'md'
   },
   min: {
-    type: Date,
+    type: Date
   },
   max: {
-    type: Date,
+    type: Date
   },
   buttonVariant: {
     type: String,
@@ -55,10 +76,10 @@ const props = defineProps({
   required: {
     type: Boolean,
     default: false
-  },
+  }
 })
 
-const emit = defineEmits(['input'])
+const emit = defineEmits(['update:modelValue'])
 
 const uid = v4()
 const dateInput = ref<HTMLInputElement>()
@@ -66,14 +87,14 @@ const isHover = ref(false)
 
 const buttonClasses = computed(() => ({
   [`btn-${props.size}`]: true,
-  [`btn-${props.buttonVariant}`]: !!props.buttonVariant,
+  [`btn-${props.buttonVariant}`]: !!props.buttonVariant
 }))
 
 const iconClasses = computed(() => ({
   'bi-calendar': !isHover.value,
   'bi-calendar-fill': isHover.value,
   'b-icon': true,
-  'bi': true,
+  bi: true
 }))
 
 const minDate = computed(() => {
@@ -101,7 +122,7 @@ const handleInput = (e: Event) => {
   if (props.required && !target.value) {
     return
   }
-  emit('input', target.value)
+  emit('update:modelValue', target.value)
 }
 </script>
 
@@ -111,7 +132,7 @@ const handleInput = (e: Event) => {
   flex-direction: column;
 }
 
-input[type="date"]::-webkit-clear-button {
+input[type='date']::-webkit-clear-button {
   display: none;
 }
 </style>