diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index a499730..c2641e7 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -43,6 +43,18 @@ module.exports = {
     '@typescript-eslint/no-unnecessary-boolean-literal-compare': 'error',
     '@typescript-eslint/interface-name-prefix': 'off',
     '@typescript-eslint/indent': ['error', 2],
+    // TODO: refactor these rules starts here
+    'vuejs-accessibility/form-control-has-label': 'off',
+    'import/extensions': 'off',
+    'vue/require-default-prop': 'warn',
+    '@typescript-eslint/no-unsafe-argument': 'off',
+    '@typescript-eslint/no-unsafe-assignment': 'off',
+    '@typescript-eslint/no-unsafe-call': 'off',
+    'vuejs-accessibility/click-events-have-key-events':'warn',
+    '@typescript-eslint/no-unsafe-member-access': 'off',
+    '@typescript-eslint/no-unsafe-return': 'off',
+    'vue/multi-word-component-names': 'off',
+    // TODO: refactor these rules ends here
     '@typescript-eslint/naming-convention': [
       'warn',
       {
diff --git a/package.json b/package.json
index 328917b..8742976 100644
--- a/package.json
+++ b/package.json
@@ -65,7 +65,8 @@
     "vue-tsc": "^1.8.5"
   },
   "lint-staged": {
-    "*.ts": "eslint --cache --fix"
+    "*.ts": "eslint --cache --fix",
+    "*.vue": "eslint --cache --fix"
   },
   "types": "./types/index.d.ts",
   "keywords": [
diff --git a/src/components/datepicker/DateInput.vue b/src/components/datepicker/DateInput.vue
index a9b4f14..63a6ea3 100644
--- a/src/components/datepicker/DateInput.vue
+++ b/src/components/datepicker/DateInput.vue
@@ -4,7 +4,7 @@
     <span
       v-if="calendarButton"
       class="vuejs3-datepicker__calendar-button"
-      :class="{ 'input-group-prepend': addBootstrapClass, 'cursor-na' : disabled }"
+      :class="{ 'input-group-prepend': addBootstrapClass, 'cursor-na': disabled }"
       @click="showCalendar"
     >
       <span :class="{ 'input-group-text': addBootstrapClass }">
@@ -81,11 +81,11 @@ export default defineComponent({
   props: {
     selectedDate: {
       type: [Date, String],
-      default: null
+      default: null,
     },
     resetTypedDate: {
       type: [Date as new () => Date],
-      default: new Date()
+      default: new Date(),
     },
     format: {
       type: [String, Function],
@@ -133,15 +133,15 @@ export default defineComponent({
       type: Boolean,
     },
     typeable: {
-      type: Boolean
+      type: Boolean,
     },
     addBootstrapClass: {
       type: Boolean,
       default: false,
       required: false,
       validator: (value: boolean) => {
-        return !!value
-      }
+        return !!value;
+      },
     },
     useUtc: {
       type: Boolean,
@@ -177,7 +177,7 @@ export default defineComponent({
     theme: {
       default: 'green',
       type: String,
-    }
+    },
   },
   emits: ['show-calendar', 'typed-date', 'clear-date', 'close-calendar'],
   setup(props, { emit }) {
@@ -191,7 +191,7 @@ export default defineComponent({
         }
         return {
           'form-control': true,
-          ...((props.inputClass as unknown) as Record<string, any>),
+          ...(props.inputClass as unknown as Record<string, any>),
         };
       }
       return props.inputClass;
@@ -301,7 +301,7 @@ export default defineComponent({
 </script>
 
 <style scoped>
-  .cursor-na {
-    cursor: 'not-allowed';
-  }
+.cursor-na {
+  cursor: 'not-allowed';
+}
 </style>
diff --git a/src/components/datepicker/Datepicker.vue b/src/components/datepicker/DatePickerComponent.vue
similarity index 99%
rename from src/components/datepicker/Datepicker.vue
rename to src/components/datepicker/DatePickerComponent.vue
index 7397ab5..3c41ec5 100644
--- a/src/components/datepicker/Datepicker.vue
+++ b/src/components/datepicker/DatePickerComponent.vue
@@ -270,7 +270,7 @@ export default defineComponent({
     theme: {
       default: 'green',
       type: String,
-    }
+    },
   },
   emits: [
     'input',
@@ -284,7 +284,7 @@ export default defineComponent({
     'selected-disabled',
   ],
   setup(props, { emit }) {
-    const initmodelvalue = new Date((props.modelValue as unknown) as Date);
+    const initmodelvalue = new Date(props.modelValue as unknown as Date);
     const pageTimestamp = ref<number>(0);
     const selectedDate = ref<Date | string | null>(null);
     if (props.modelValue && isValidDate(initmodelvalue)) {
diff --git a/src/components/datepicker/PickerDay.vue b/src/components/datepicker/PickerDay.vue
index fb60fbe..9801bae 100644
--- a/src/components/datepicker/PickerDay.vue
+++ b/src/components/datepicker/PickerDay.vue
@@ -19,7 +19,8 @@
           >{{ isYmd ? currYearName : currMonthName }} {{ isYmd ? currMonthName : currYearName }}</span
         >
         <span @click="isRtl ? previousMonth() : nextMonth()" class="next" :class="{ disabled: isRightNavDisabled }"
-          >&gt;</span>
+          >&gt;</span
+        >
       </header>
       <div :class="isRtl ? 'flex-rtl' : ''">
         <span class="cell day-header" v-for="d in daysOfWeek" :key="d.timestamp">{{ d }}</span>
@@ -88,15 +89,12 @@ export default defineComponent({
       type: Date as PropType<Date>,
       default: new Date(),
     },
-    pageTimestamp: {
-      type: Number,
-    },
     fullMonthName: {
       type: Boolean,
     },
     allowedToShowView: {
       type: Function,
-      required: true
+      required: true,
     },
     dayCellContent: {
       type: Function,
diff --git a/src/components/datepicker/PickerMonth.vue b/src/components/datepicker/PickerMonth.vue
index 90702be..fe9b3e6 100644
--- a/src/components/datepicker/PickerMonth.vue
+++ b/src/components/datepicker/PickerMonth.vue
@@ -21,7 +21,8 @@
           pageYearName
         }}</span>
         <span @click="isRtl ? previousYear() : nextYear()" class="next" :class="{ disabled: isRightNavDisabled }"
-          >&gt;</span>
+          >&gt;</span
+        >
       </header>
       <span
         class="cell month"
@@ -73,9 +74,6 @@ export default defineComponent({
       type: Date as PropType<Date>,
       default: new Date(),
     },
-    pageTimestamp: {
-      type: Number,
-    },
     disabledDates: {
       type: Object,
     },
diff --git a/src/components/datepicker/PickerYear.vue b/src/components/datepicker/PickerYear.vue
index 6f1521a..e6f110d 100644
--- a/src/components/datepicker/PickerYear.vue
+++ b/src/components/datepicker/PickerYear.vue
@@ -19,7 +19,8 @@
         >
         <span>{{ getPageDecade }}</span>
         <span @click="isRtl ? previousDecade() : nextDecade()" class="next" :class="{ disabled: isRightNavDisabled }"
-          >&gt;</span>
+          >&gt;</span
+        >
       </header>
       <span
         class="cell year"
@@ -43,7 +44,7 @@ import {
   getMonthNameAbbr,
   setFullYear,
   stringToDate,
-} from './utils/DateUtils';
+} from './utils/DateUtils.ts';
 
 export default defineComponent({
   name: 'PickerYear',
@@ -63,9 +64,6 @@ export default defineComponent({
       type: Date as PropType<Date>,
       default: new Date(),
     },
-    pageTimestamp: {
-      type: Number,
-    },
     disabledDates: {
       type: Object,
     },
@@ -86,7 +84,7 @@ export default defineComponent({
     },
     allowedToShowView: {
       type: Function,
-      required: true
+      required: true,
     },
     useUtc: {
       type: Boolean,
diff --git a/src/components/examples/CalendarIcon.vue b/src/components/examples/CalendarIcon.vue
index 1ffa318..a921a6f 100644
--- a/src/components/examples/CalendarIcon.vue
+++ b/src/components/examples/CalendarIcon.vue
@@ -1,8 +1,6 @@
 <template>
   <Wrapper :templatecontent="template" :scriptcontent="script">
-    <template v-slot:label>
-      Calendar Icon Details
-    </template>
+    <template v-slot:label> Calendar Icon Details </template>
     <template v-slot:content>
       <div class="flex-block">
         <appdate-picker placeholder="Select Date" iconColor="red" :iconHeight="18" :iconWidth="18"> </appdate-picker>
@@ -14,7 +12,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import Wrapper from '../wrapper/Wrapper.vue';
-import Datepicker from '../datepicker/Datepicker.vue';
+import Datepicker from '../datepicker/DatePickerComponent.vue';
 
 export default defineComponent({
   name: 'InlineView',
diff --git a/src/components/examples/DayView.vue b/src/components/examples/DayView.vue
index 1c9bf3d..11ada63 100644
--- a/src/components/examples/DayView.vue
+++ b/src/components/examples/DayView.vue
@@ -1,8 +1,6 @@
 <template>
   <Wrapper :templatecontent="template" :scriptcontent="script">
-    <template v-slot:label>
-      Day View
-    </template>
+    <template v-slot:label> Day View </template>
     <template v-slot:content>
       <div class="flex-block">
         <appdate-picker placeholder="Select Day" :minimum-view="'day'" :maximum-view="'day'" @input="handleChangedDay">
@@ -15,7 +13,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import Wrapper from '../wrapper/Wrapper.vue';
-import Datepicker from '../datepicker/Datepicker.vue';
+import Datepicker from '../datepicker/DatePickerComponent.vue';
 
 export default defineComponent({
   name: 'DayView',
diff --git a/src/components/examples/DefaultValue.vue b/src/components/examples/DefaultValue.vue
index e638c96..a3a2456 100644
--- a/src/components/examples/DefaultValue.vue
+++ b/src/components/examples/DefaultValue.vue
@@ -5,7 +5,7 @@
       <div class="flex-block">
         <appdate-picker placeholder="Select Date" @input="dateSelected" :value="defaultValue"> </appdate-picker>
         <div class="change-btn">
-          <button @click="changeDefaultValue">Change Default Value</button>
+          <button type="button" @click="changeDefaultValue">Change Default Value</button>
         </div>
       </div>
     </template>
@@ -15,7 +15,7 @@
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
 import Wrapper from '../wrapper/Wrapper.vue';
-import Datepicker from '../datepicker/Datepicker.vue';
+import Datepicker from '../datepicker/DatePickerComponent.vue';
 
 export default defineComponent({
   name: 'DefaultValue',
diff --git a/src/components/examples/Disabled.vue b/src/components/examples/Disabled.vue
index d8cb7c1..382043e 100644
--- a/src/components/examples/Disabled.vue
+++ b/src/components/examples/Disabled.vue
@@ -1,13 +1,11 @@
 <template>
   <Wrapper :templatecontent="template" :scriptcontent="script">
-    <template v-slot:label>
-      Disabled
-    </template>
+    <template v-slot:label> Disabled </template>
     <template v-slot:content>
       <div class="flex-block">
         <appdate-picker
           placeholder="Select Date"
-          @input="dateSelected" 
+          @input="dateSelected"
           :value="defaultValue"
           :openDate="new Date('2020-11-06')"
           :disabled-dates="{
@@ -26,7 +24,7 @@
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
 import Wrapper from '../wrapper/Wrapper.vue';
-import Datepicker from '../datepicker/Datepicker.vue';
+import Datepicker from '../datepicker/DatePickerComponent.vue';
 
 export default defineComponent({
   name: 'Disabled',
diff --git a/src/components/examples/HighlightedView.vue b/src/components/examples/HighlightedView.vue
index 85d4f09..d971e3e 100644
--- a/src/components/examples/HighlightedView.vue
+++ b/src/components/examples/HighlightedView.vue
@@ -1,8 +1,6 @@
 <template>
   <Wrapper :templatecontent="template" :scriptcontent="script">
-    <template v-slot:label>
-      Highlighted View
-    </template>
+    <template v-slot:label> Highlighted View </template>
     <template v-slot:content>
       <div class="flex-block">
         <appdate-picker
@@ -21,7 +19,7 @@
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
 import Wrapper from '../wrapper/Wrapper.vue';
-import Datepicker from '../datepicker/Datepicker.vue';
+import Datepicker from '../datepicker/DatePickerComponent.vue';
 
 export default defineComponent({
   name: 'HighlightedView',
@@ -46,7 +44,7 @@ export default defineComponent({
   import { ref } from 'vue';
   export default {
     setup(){
-      return {  
+      return {
       }
     }
   }
diff --git a/src/components/examples/InlineView.vue b/src/components/examples/InlineView.vue
index 2e40236..c24f158 100644
--- a/src/components/examples/InlineView.vue
+++ b/src/components/examples/InlineView.vue
@@ -1,8 +1,6 @@
 <template>
   <Wrapper :templatecontent="template" :scriptcontent="script">
-    <template v-slot:label>
-      Inline View
-    </template>
+    <template v-slot:label> Inline View </template>
     <template v-slot:content>
       <div class="flex-block">
         <appdate-picker :inline="true"></appdate-picker>
@@ -14,7 +12,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import Wrapper from '../wrapper/Wrapper.vue';
-import Datepicker from '../datepicker/Datepicker.vue';
+import Datepicker from '../datepicker/DatePickerComponent.vue';
 
 export default defineComponent({
   name: 'InlineView',
diff --git a/src/components/examples/Language.vue b/src/components/examples/Language.vue
index 56a18c5..f154af3 100644
--- a/src/components/examples/Language.vue
+++ b/src/components/examples/Language.vue
@@ -6,7 +6,7 @@
         <appdate-picker language="hi" placeholder="Select Date" @input="dateSelected" :value="defaultValue">
         </appdate-picker>
         <div class="change-btn">
-          <button @click="changeDefaultValue">Change Default Value</button>
+          <button type="button" @click="changeDefaultValue">Change Default Value</button>
         </div>
       </div>
     </template>
@@ -16,7 +16,7 @@
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
 import Wrapper from '../wrapper/Wrapper.vue';
-import Datepicker from '../datepicker/Datepicker.vue';
+import Datepicker from '../datepicker/DatePickerComponent.vue';
 
 export default defineComponent({
   name: 'DefaultValue',
diff --git a/src/components/examples/MonthView.vue b/src/components/examples/MonthView.vue
index 803eaa3..e9aa68d 100644
--- a/src/components/examples/MonthView.vue
+++ b/src/components/examples/MonthView.vue
@@ -1,8 +1,6 @@
 <template>
   <Wrapper :templatecontent="template" :scriptcontent="script">
-    <template v-slot:label>
-      Month View
-    </template>
+    <template v-slot:label> Month View </template>
     <template v-slot:content>
       <div class="flex-block">
         <appdate-picker
@@ -21,7 +19,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import Wrapper from '../wrapper/Wrapper.vue';
-import Datepicker from '../datepicker/Datepicker.vue';
+import Datepicker from '../datepicker/DatePickerComponent.vue';
 
 export default defineComponent({
   name: 'MonthView',
diff --git a/src/components/examples/ProgrammaticAccess.vue b/src/components/examples/ProgrammaticAccess.vue
index b674267..474a2d8 100644
--- a/src/components/examples/ProgrammaticAccess.vue
+++ b/src/components/examples/ProgrammaticAccess.vue
@@ -1,8 +1,6 @@
 <template>
   <Wrapper :templatecontent="template" :scriptcontent="script">
-    <template v-slot:label>
-      Programmatic Access
-    </template>
+    <template v-slot:label> Programmatic Access </template>
     <template v-slot:content>
       <div class="flex-block">
         <appdate-picker
@@ -14,7 +12,7 @@
         >
         </appdate-picker>
         <div class="change-btn">
-          <button @click="accessDatePicker">Access DatePicker</button>
+          <button type="button" @click="accessDatePicker">Access DatePicker</button>
           <p>Value : {{ accessValue }}</p>
         </div>
       </div>
@@ -25,7 +23,7 @@
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
 import Wrapper from '../wrapper/Wrapper.vue';
-import Datepicker from '../datepicker/Datepicker.vue';
+import Datepicker from '../datepicker/DatePickerComponent.vue';
 
 export default defineComponent({
   name: 'ProgrammaticAccess',
@@ -41,7 +39,7 @@ export default defineComponent({
       >
       </appdate-picker>
       <div class="change-btn">
-        <button @click="accessDatePicker">
+        <button  type="button" @click="accessDatePicker">
           Access DatePicker
         </button>
       </div>`;
@@ -64,7 +62,7 @@ export default defineComponent({
      * Handler for programmatic access of selected date
      */
     function accessDatePicker(): void {
-      const value = ((inputRef.value as unknown) as InstanceType<typeof Datepicker>).selectedDate;
+      const value = (inputRef.value as unknown as InstanceType<typeof Datepicker>).selectedDate;
       accessValue.value = value as Date;
     }
 
diff --git a/src/components/examples/Slotview.vue b/src/components/examples/Slotview.vue
index 87d4d97..392844c 100644
--- a/src/components/examples/Slotview.vue
+++ b/src/components/examples/Slotview.vue
@@ -19,7 +19,7 @@
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
 import Wrapper from '../wrapper/Wrapper.vue';
-import Datepicker from '../datepicker/Datepicker.vue';
+import Datepicker from '../datepicker/DatePickerComponent.vue';
 
 export default defineComponent({
   name: 'Slot View',
diff --git a/src/components/examples/StringView.vue b/src/components/examples/StringView.vue
index a872d55..e4ed27b 100644
--- a/src/components/examples/StringView.vue
+++ b/src/components/examples/StringView.vue
@@ -12,7 +12,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import Wrapper from '../wrapper/Wrapper.vue';
-import Datepicker from '../datepicker/Datepicker.vue';
+import Datepicker from '../datepicker/DatePickerComponent.vue';
 
 export default defineComponent({
   name: 'DefaultValue',
diff --git a/src/components/examples/Typeable.vue b/src/components/examples/Typeable.vue
index d00c2fe..10085d3 100644
--- a/src/components/examples/Typeable.vue
+++ b/src/components/examples/Typeable.vue
@@ -1,8 +1,6 @@
 <template>
   <Wrapper :templatecontent="template" :scriptcontent="script">
-    <template v-slot:label>
-      Typeable
-    </template>
+    <template v-slot:label> Typeable </template>
     <template v-slot:content>
       <div class="flex-block">
         <appdate-picker
@@ -22,7 +20,7 @@
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
 import Wrapper from '../wrapper/Wrapper.vue';
-import Datepicker from '../datepicker/Datepicker.vue';
+import Datepicker from '../datepicker/DatePickerComponent.vue';
 
 export default defineComponent({
   name: 'Typeable',
@@ -66,7 +64,7 @@ export default defineComponent({
     /**
      * Handler for select-day function
      */
-     function handleValue(payload: Date): void {
+    function handleValue(payload: Date): void {
       console.log('handleValue', payload);
     }
     return {
@@ -74,7 +72,7 @@ export default defineComponent({
       template,
       script,
       customClass,
-      handleValue
+      handleValue,
     };
   },
 });
diff --git a/src/components/examples/VModel.vue b/src/components/examples/VModel.vue
index 1ce06ca..169afaa 100644
--- a/src/components/examples/VModel.vue
+++ b/src/components/examples/VModel.vue
@@ -1,8 +1,6 @@
 <template>
   <Wrapper :templatecontent="template" :scriptcontent="script">
-    <template v-slot:label>
-      V-Model
-    </template>
+    <template v-slot:label> V-Model </template>
     <template v-slot:content>
       <div class="flex-block">
         <appdate-picker
@@ -12,7 +10,7 @@
           @cleared="handleClearDate"
         />
         <div class="change-btn">
-          <button @click="changeValue">Change Value</button>
+          <button type="button" @click="changeValue">Change Value</button>
           <p>UpdateValue : {{ dateinput }}</p>
         </div>
       </div>
@@ -23,7 +21,7 @@
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
 import Wrapper from '../wrapper/Wrapper.vue';
-import Datepicker from '../datepicker/Datepicker.vue';
+import Datepicker from '../datepicker/DatePickerComponent.vue';
 
 export default defineComponent({
   name: 'VModel',
diff --git a/src/components/examples/YearView.vue b/src/components/examples/YearView.vue
index eb4af16..6893757 100644
--- a/src/components/examples/YearView.vue
+++ b/src/components/examples/YearView.vue
@@ -1,8 +1,6 @@
 <template>
   <Wrapper :templatecontent="template" :scriptcontent="script">
-    <template v-slot:label>
-      Year View
-    </template>
+    <template v-slot:label> Year View </template>
     <template v-slot:content>
       <div class="flex-block">
         <appdate-picker placeholder="Select Year" :minimum-view="'year'" :maximum-view="'year'"> </appdate-picker>
@@ -14,7 +12,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import Wrapper from '../wrapper/Wrapper.vue';
-import Datepicker from '../datepicker/Datepicker.vue';
+import Datepicker from '../datepicker/DatePickerComponent.vue';
 
 export default defineComponent({
   name: 'YearView',
diff --git a/tests/unit/coverage/clover.xml b/tests/unit/coverage/clover.xml
index b8ce3bd..dc67875 100644
--- a/tests/unit/coverage/clover.xml
+++ b/tests/unit/coverage/clover.xml
@@ -54,7 +54,7 @@
         <line num="209" count="2" type="stmt"/>
         <line num="212" count="58" type="stmt"/>
       </file>
-      <file name="Datepicker.vue" path="/Users/shubhadipmaity/projects/vue3-datepicker/src/components/datepicker/Datepicker.vue">
+      <file name="Datepicker.vue" path="/Users/shubhadipmaity/projects/vue3-datepicker/src/components/datepicker/DatePickerComponent.vue">
         <metrics statements="148" coveredstatements="136" conditionals="62" coveredconditionals="57" methods="36" coveredmethods="30"/>
         <line num="2" count="4" type="stmt"/>
         <line num="3" count="4" type="stmt"/>
diff --git a/tests/unit/coverage/lcov-report/examples/VModel.vue.html b/tests/unit/coverage/lcov-report/examples/VModel.vue.html
index 4f8196f..6f8a111 100644
--- a/tests/unit/coverage/lcov-report/examples/VModel.vue.html
+++ b/tests/unit/coverage/lcov-report/examples/VModel.vue.html
@@ -219,7 +219,7 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">examples</a> VM
 &lt;script lang="ts"&gt;
 <span class="cstat-no" title="statement not covered" >import { defineComponent, ref } from 'vue';</span>
 import Wrapper from '../wrapper/Wrapper.vue';
-import Datepicker from '../datepicker/Datepicker.vue';
+import Datepicker from '../datepicker/DatePickerComponent.vue';
 &nbsp;
 export default defineComponent({
   name: 'VModel',
diff --git a/tests/unit/coverage/lcov-report/examples/YearView.vue.html b/tests/unit/coverage/lcov-report/examples/YearView.vue.html
index 15eb24f..f994377 100644
--- a/tests/unit/coverage/lcov-report/examples/YearView.vue.html
+++ b/tests/unit/coverage/lcov-report/examples/YearView.vue.html
@@ -179,7 +179,7 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">examples</a> Ye
 &lt;script lang="ts"&gt;
 import { defineComponent } from 'vue';
 import Wrapper from '../wrapper/Wrapper.vue';
-import Datepicker from '../datepicker/Datepicker.vue';
+import Datepicker from '../datepicker/DatePickerComponent.vue';
 &nbsp;
 export default defineComponent({
   name: 'YearView',
diff --git a/tests/unit/coverage/lcov-report/src/App.vue.html b/tests/unit/coverage/lcov-report/src/App.vue.html
index 9c89762..cb249c6 100644
--- a/tests/unit/coverage/lcov-report/src/App.vue.html
+++ b/tests/unit/coverage/lcov-report/src/App.vue.html
@@ -602,7 +602,7 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">src</a> App.vue
 &nbsp;
 &lt;script lang="ts"&gt;
 import { defineComponent } from 'vue';
-import Datepicker from './components/datepicker/Datepicker.vue';
+import Datepicker from './components/datepicker/DatePickerComponent.vue';
 &nbsp;
 export default defineComponent({
   name: 'App-Home',
diff --git a/tests/unit/coverage/lcov-report/src/components/datepicker/Datepicker.vue.html b/tests/unit/coverage/lcov-report/src/components/datepicker/Datepicker.vue.html
index 29ff668..ec0de51 100644
--- a/tests/unit/coverage/lcov-report/src/components/datepicker/Datepicker.vue.html
+++ b/tests/unit/coverage/lcov-report/src/components/datepicker/Datepicker.vue.html
@@ -3,7 +3,7 @@
 <html lang="en">
 
 <head>
-    <title>Code coverage report for src/components/datepicker/Datepicker.vue</title>
+    <title>Code coverage report for src/components/datepicker/DatePickerComponent.vue</title>
     <meta charset="utf-8" />
     <link rel="stylesheet" href="../../../prettify.css" />
     <link rel="stylesheet" href="../../../base.css" />
diff --git a/tests/unit/specs/Datepicker/Datepicker.spec.js b/tests/unit/specs/Datepicker/Datepicker.spec.js
index a28aaf2..d2ae8e8 100644
--- a/tests/unit/specs/Datepicker/Datepicker.spec.js
+++ b/tests/unit/specs/Datepicker/Datepicker.spec.js
@@ -1,4 +1,4 @@
-import Datepicker from '@/components/datepicker/Datepicker.vue';
+import Datepicker from '@/components/datepicker/DatePickerComponent.vue';
 import DateInput from '@/components/datepicker/DateInput.vue';
 import { mount } from '@vue/test-utils'
 import * as Langlist from '@/components/datepicker/locale';
@@ -13,7 +13,7 @@ describe('Datepicker unmounted', () => {
   })
 
   it('has a mounted hook', () => {
-    
+
     expect(wrapper.find('input')).toBeTruthy()
   })
 
diff --git a/tests/unit/specs/Datepicker/inline.spec.js b/tests/unit/specs/Datepicker/inline.spec.js
index 1cf9a36..242ee61 100644
--- a/tests/unit/specs/Datepicker/inline.spec.js
+++ b/tests/unit/specs/Datepicker/inline.spec.js
@@ -1,4 +1,4 @@
-import Datepicker from '@/components/datepicker/Datepicker.vue';
+import Datepicker from '@/components/datepicker/DatePickerComponent.vue';
 import { mount } from '@vue/test-utils'
 import * as Langlist from '@/components/datepicker/locale';
 
diff --git a/tests/unit/specs/Datepicker/openDate.spec.js b/tests/unit/specs/Datepicker/openDate.spec.js
index d102917..6acf759 100644
--- a/tests/unit/specs/Datepicker/openDate.spec.js
+++ b/tests/unit/specs/Datepicker/openDate.spec.js
@@ -1,4 +1,4 @@
-import Datepicker from '@/components/datepicker/Datepicker.vue';
+import Datepicker from '@/components/datepicker/DatePickerComponent.vue';
 import { mount } from '@vue/test-utils'
 import * as Langlist from '@/components/datepicker/locale';
 
@@ -8,7 +8,7 @@ describe('Datepicker with open date', () => {
   beforeEach(()=>{
     en = Langlist.data['en'];
   })
-  
+
   const openDate = new Date()
   let wrapper
   beforeEach(() => {
diff --git a/tests/unit/specs/Datepicker/restrictedViews.spec.js b/tests/unit/specs/Datepicker/restrictedViews.spec.js
index 323ec9f..2bbfa6d 100644
--- a/tests/unit/specs/Datepicker/restrictedViews.spec.js
+++ b/tests/unit/specs/Datepicker/restrictedViews.spec.js
@@ -1,4 +1,4 @@
-import Datepicker from '@/components/datepicker/Datepicker.vue';
+import Datepicker from '@/components/datepicker/DatePickerComponent.vue';
 import { mount } from '@vue/test-utils'
 import * as Langlist from '@/components/datepicker/locale';
 
diff --git a/vite.config.lib.ts b/vite.config.lib.ts
index 47a8c0e..d7b3002 100644
--- a/vite.config.lib.ts
+++ b/vite.config.lib.ts
@@ -13,7 +13,7 @@ export default defineConfig({
     emptyOutDir: true,
     cssCodeSplit: true,
     lib: {
-      entry: resolve(__dirname, './src/components/datepicker/Datepicker.vue'),
+      entry: resolve(__dirname, './src/components/datepicker/DatePickerComponent.vue'),
       name:'vuejs3-datepicker'
     },
     rollupOptions: {