diff --git a/.eslintcache b/.eslintcache
new file mode 100644
index 0000000..7db0893
--- /dev/null
+++ b/.eslintcache
@@ -0,0 +1 @@
+[{"/Users/shubhadipmaity/projects/vuejs3-datepicker/src/components/datepicker/DateInput.vue":"1","/Users/shubhadipmaity/projects/vuejs3-datepicker/src/components/examples/VModel.vue":"2"},{"size":7097,"mtime":1676125280403},{"size":1645,"mtime":1676124771220}]
\ No newline at end of file
diff --git a/serve/datepicker.js b/serve/datepicker.js
index 268db21..f90f59a 100644
--- a/serve/datepicker.js
+++ b/serve/datepicker.js
@@ -1905,7 +1905,7 @@ isNextDecadeDisabled:isNextDecadeDisabled,isPreviousDecadeDisabled:isPreviousDec
          * Click Outside handler
          */function closeOnClickOutside(){close();}/** ********************************** Watchers  *********************************** */watch(function(){return props.modelValue;},function(curr){setValue(curr);});watch(function(){return props.value;},function(curr){setValue(curr);});watch(function(){return props.openDate;},function(){setPageDate();});watch(function(){return props.initialView;},function(){setInitialView();});init();return{pageTimestamp:pageTimestamp,selectedDate:selectedDate,showDayView:showDayView,showMonthView:showMonthView,showYearView:showYearView,calendarHeight:calendarHeight,resetTypedDate:resetTypedDate,// computed
 pageDate:pageDate,translation:translation,calendarStyle:calendarStyle,isOpen:isOpen,isInline:isInline,isRtl:isRtl,// methods
-setTypedDate:setTypedDate,handleChangedMonthFromDayPicker:handleChangedMonthFromDayPicker,selectYear:selectYear,selectMonth:selectMonth,selectDisabledDate:selectDisabledDate,clearDate:clearDate,showCalendar:showCalendar,close:close,allowedToShowView:allowedToShowView,showYearCalendar:showYearCalendar,showMonthCalendar:showMonthCalendar,setPageDate:setPageDate,selectDate:selectDate,closeOnClickOutside:closeOnClickOutside,showDayCalendar:showDayCalendar,computedInitialView:computedInitialView,setDate:setDate,setDate1:setDate1,setValue:setValue};}});function render$7(_ctx,_cache,$props,$setup,$data,$options){var _component_date_input=resolveComponent("date-input");var _component_picker_day=resolveComponent("picker-day");var _component_picker_month=resolveComponent("picker-month");var _component_picker_year=resolveComponent("picker-year");var _directive_clickoutside=resolveDirective("clickoutside");return withDirectives((openBlock(),createBlock("div",{class:["vuejs3-datepicker",[_ctx.isRtl?'rtl':'',"vuejs3-".concat(_ctx.theme),_ctx.wrapperClass]]},[createVNode(_component_date_input,{selectedDate:_ctx.selectedDate,resetTypedDate:_ctx.resetTypedDate,format:_ctx.format,translation:_ctx.translation,inline:_ctx.inline,id:_ctx.id,name:_ctx.name,fullMonthName:_ctx.fullMonthName,openDate:_ctx.openDate,placeholder:_ctx.placeholder,inputClass:_ctx.inputClass,typeable:_ctx.typeable,clearButton:_ctx.clearButton,clearButtonIcon:_ctx.clearButtonIcon,calendarButton:_ctx.calendarButton,calendarButtonIcon:_ctx.calendarButtonIcon,calendarButtonIconContent:_ctx.calendarButtonIconContent,disabled:_ctx.disabled,required:_ctx.required,addBootstrapClass:_ctx.addBootstrapClass,"use-utc":_ctx.useUtc,onShowCalendar:_ctx.showCalendar,onCloseCalendar:_ctx.close,onTypedDate:_ctx.setTypedDate,onClearDate:_ctx.clearDate,minimumView:_ctx.minimumView,maximumView:_ctx.maximumView,hideInput:_ctx.hideInput,iconWidth:_ctx.iconWidth,iconHeight:_ctx.iconHeight,iconColor:_ctx.iconColor,theme:_ctx.theme},{belowDate:withCtx(function(){return[renderSlot(_ctx.$slots,"belowDate")];}),_:1},8/* PROPS */,["selectedDate","resetTypedDate","format","translation","inline","id","name","fullMonthName","openDate","placeholder","inputClass","typeable","clearButton","clearButtonIcon","calendarButton","calendarButtonIcon","calendarButtonIconContent","disabled","required","addBootstrapClass","use-utc","onShowCalendar","onCloseCalendar","onTypedDate","onClearDate","minimumView","maximumView","hideInput","iconWidth","iconHeight","iconColor","theme"]),createCommentVNode("Day View  "),_ctx.allowedToShowView('day')?(openBlock(),createBlock(_component_picker_day,{key:0,pageDate:_ctx.pageDate,selectedDate:_ctx.selectedDate,showDayView:_ctx.showDayView,fullMonthName:_ctx.fullMonthName,allowedToShowView:_ctx.allowedToShowView,disabledDates:_ctx.disabledDates,highlighted:_ctx.highlighted,calendarClass:_ctx.calendarClass,calendarStyle:_ctx.calendarStyle,translation:_ctx.translation,pageTimestamp:_ctx.pageTimestamp,isRtl:_ctx.isRtl,mondayFirst:_ctx.mondayFirst,dayCellContent:_ctx.dayCellContent,onChangedMonth:_ctx.handleChangedMonthFromDayPicker,onSelectDate:_ctx.selectDate,onShowMonthCalendar:_ctx.showMonthCalendar,onSelectedDisabled:_ctx.selectDisabledDate,onShowYearCalendar:_ctx.showYearCalendar,minimumView:_ctx.minimumView,maximumView:_ctx.maximumView,preventDisableDateSelection:_ctx.preventDisableDateSelection,theme:_ctx.theme},{customCalendarHeader:withCtx(function(){return[renderSlot(_ctx.$slots,"customCalendarHeader")];}),_:1},8/* PROPS */,["pageDate","selectedDate","showDayView","fullMonthName","allowedToShowView","disabledDates","highlighted","calendarClass","calendarStyle","translation","pageTimestamp","isRtl","mondayFirst","dayCellContent","onChangedMonth","onSelectDate","onShowMonthCalendar","onSelectedDisabled","onShowYearCalendar","minimumView","maximumView","preventDisableDateSelection","theme"])):createCommentVNode("v-if",true),createCommentVNode("Month View "),_ctx.allowedToShowView('month')?(openBlock(),createBlock(_component_picker_month,{key:1,pageDate:_ctx.pageDate,selectedDate:_ctx.selectedDate,showMonthView:_ctx.showMonthView,allowedToShowView:_ctx.allowedToShowView,disabledDates:_ctx.disabledDates,calendarClass:_ctx.calendarClass,calendarStyle:_ctx.calendarStyle,translation:_ctx.translation,isRtl:_ctx.isRtl,"use-utc":_ctx.useUtc,fullMonthName:_ctx.fullMonthName,onSelectMonth:_ctx.selectMonth,onShowYearCalendar:_ctx.showYearCalendar,onChangedYear:_ctx.setPageDate,minimumView:_ctx.minimumView,maximumView:_ctx.maximumView,theme:_ctx.theme},{customCalendarHeader:withCtx(function(){return[renderSlot(_ctx.$slots,"customCalendarHeader")];}),_:1},8/* PROPS */,["pageDate","selectedDate","showMonthView","allowedToShowView","disabledDates","calendarClass","calendarStyle","translation","isRtl","use-utc","fullMonthName","onSelectMonth","onShowYearCalendar","onChangedYear","minimumView","maximumView","theme"])):createCommentVNode("v-if",true),createCommentVNode(" Year View "),_ctx.allowedToShowView('year')?(openBlock(),createBlock(_component_picker_year,{key:2,pageDate:_ctx.pageDate,selectedDate:_ctx.selectedDate,showYearView:_ctx.showYearView,allowedToShowView:_ctx.allowedToShowView,disabledDates:_ctx.disabledDates,calendarClass:_ctx.calendarClass,calendarStyle:_ctx.calendarStyle,translation:_ctx.translation,isRtl:_ctx.isRtl,"use-utc":_ctx.useUtc,onSelectYear:_ctx.selectYear,onChangedDecade:_ctx.setPageDate,fullMonthName:_ctx.fullMonthName,minimumView:_ctx.minimumView,maximumView:_ctx.maximumView,theme:_ctx.theme},{customCalendarHeader:withCtx(function(){return[renderSlot(_ctx.$slots,"customCalendarHeader")];}),_:1},8/* PROPS */,["pageDate","selectedDate","showYearView","allowedToShowView","disabledDates","calendarClass","calendarStyle","translation","isRtl","use-utc","onSelectYear","onChangedDecade","fullMonthName","minimumView","maximumView","theme"])):createCommentVNode("v-if",true)],2/* CLASS */)),[[_directive_clickoutside,{handler:_ctx.inline?null:_ctx.closeOnClickOutside}]]);}var css_248z$3=".rtl{direction:rtl}.vuejs3-datepicker{position:relative;display:inline-block}.vuejs3-datepicker *{box-sizing:border-box}.vuejs3-datepicker input{border:1px solid}.vuejs3-datepicker__icon{display:-webkit-flex;display:-ms-flexbox;display:flex}.vuejs3-datepicker__value{min-width:200px;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;border-radius:5px;padding:13px 15px;cursor:pointer;border:1px solid}.vuejs3-datepicker__content{margin-left:10px;font-size:15px}.vuejs3-datepicker__typeablecalendar{position:absolute;top:10px;left:10px}.vuejs3-datepicker__inputvalue{min-width:200px;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;border-radius:5px;padding:12px 10px 13px 35px;cursor:pointer;border:1px solid}.vuejs3-datepicker__calendar{position:absolute;z-index:100;background:#fff;width:300px;box-shadow:0 .2rem 1rem rgba(0,0,0,.12);border-radius:4px;margin-top:4px}.vuejs3-datepicker__calendar-topbar{background-color:#40b983;color:#fff;border-radius:4px 4px 0 0;padding:25px}.vuejs3-datepicker__calendar-topbar-year{font-size:30px;margin:0;padding-bottom:10px}.vuejs3-datepicker__calendar-topbar-day{font-size:20px;margin:0}.vuejs3-datepicker__calendar-actionarea{padding:10px}.vuejs3-datepicker__calendar header{display:block;line-height:40px}.vuejs3-datepicker__calendar header span{text-align:center;width:71.42857142857143%;float:left}.vuejs3-datepicker__calendar header .next,.vuejs3-datepicker__calendar header .prev{width:14.285714285714286%;float:left;text-indent:-10000px;position:relative}.vuejs3-datepicker__calendar header .next:after,.vuejs3-datepicker__calendar header .prev:after{content:\"\";position:absolute;left:50%;width:8px;height:8px;top:50%;-webkit-transform:translateX(-50%) translateY(-50%) rotate(45deg);transform:translateX(-50%) translateY(-50%) rotate(45deg)}.vuejs3-datepicker__calendar header .prev:after{border-left:1px solid #2f2f2f;border-bottom:1px solid #2f2f2f}.vuejs3-datepicker__calendar header .next.disabled:after,.vuejs3-datepicker__calendar header .prev.disabled:after{opacity:.5}.vuejs3-datepicker__calendar header .next:after{border-top:1px solid #2f2f2f;border-right:1px solid #2f2f2f}.vuejs3-datepicker__calendar header .next:not(.disabled),.vuejs3-datepicker__calendar header .prev:not(.disabled),.vuejs3-datepicker__calendar header .up:not(.disabled){cursor:pointer;font-size:15px;border-radius:4px}.vuejs3-datepicker__calendar header .next:not(.disabled):hover,.vuejs3-datepicker__calendar header .prev:not(.disabled):hover,.vuejs3-datepicker__calendar header .up:not(.disabled):hover{background:#f8f8f8}.vuejs3-datepicker__calendar .disabled{color:#ddd;cursor:default}.vuejs3-datepicker__calendar .flex-rtl{display:-webkit-flex;display:-ms-flexbox;display:flex;width:inherit;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.vuejs3-datepicker__calendar .cell{display:inline-block;padding:0 5px;width:14.285714285714286%;height:40px;line-height:40px;text-align:center;font-size:14px;vertical-align:middle;border:1px solid transparent}.vuejs3-datepicker__calendar .cell.month,.vuejs3-datepicker__calendar .cell.year{padding:10px 5px;height:50px;line-height:28px}.vuejs3-datepicker__calendar .cell.day-header{text-transform:uppercase}.vuejs3-datepicker__calendar .cell:not(.blank):not(.disabled).day,.vuejs3-datepicker__calendar .cell:not(.blank):not(.disabled).month,.vuejs3-datepicker__calendar .cell:not(.blank):not(.disabled).year{cursor:pointer;transition:.45s}.vuejs3-datepicker__calendar .cell:not(.blank):not(.disabled).day:hover,.vuejs3-datepicker__calendar .cell:not(.blank):not(.disabled).month:hover,.vuejs3-datepicker__calendar .cell:not(.blank):not(.disabled).year:hover{border:1px solid #40b983}.vuejs3-datepicker__calendar .cell.selected{background:#40b983;color:#fff}.vuejs3-datepicker__calendar .cell.selected:hover{background:#40b983}.vuejs3-datepicker__calendar .cell.highlighted{background:#40b983;color:#fff}.vuejs3-datepicker__calendar .cell.highlighted.selected{background:#40b983}.vuejs3-datepicker__calendar .cell.highlighted.disabled{color:#a3a3a3}.vuejs3-datepicker__calendar .cell.highlighted.highlight-start,.vuejs3-datepicker__calendar .cell.highlighted:last-child{background:#2f9668}.vuejs3-datepicker__calendar .cell.grey{color:#888}.vuejs3-datepicker__calendar .cell.grey:hover{background:inherit}.vuejs3-datepicker__calendar .cell.day-header{font-size:75%;white-space:nowrap;cursor:inherit}.vuejs3-datepicker__calendar .cell.day-header:hover{background:inherit}.vuejs3-datepicker__calendar .month,.vuejs3-datepicker__calendar .year{width:33.333%}.vuejs3-datepicker__calendar-button,.vuejs3-datepicker__clear-button{cursor:pointer;font-style:normal;position:absolute;top:10px;right:10px}.vuejs3-datepicker__calendar-button.disabled,.vuejs3-datepicker__clear-button.disabled{color:#999;cursor:default}.vuejs3-datepicker #calendar-div{background-color:#fff;border-radius:5px}.dp-error{color:red;font-size:12px}.backdrop{position:fixed;display:none;width:100%;height:100%;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.5);z-index:2;cursor:pointer}";styleInject(css_248z$3);script$6.render=render$7;script$6.__file="src/components/datepicker/Datepicker.vue";var script$7=defineComponent({name:'Typeable',components:{Wrapper:script,'appdate-picker':script$6},setup:function setup(){var dateSelected=ref(new Date());var customClass='customClass';var template="<template>\n    <appdate-picker\n      :full-month-name=\"true\"\n      input-class=\"customClass\"\n      placeholder=\"YYYY-MM-DD\"\n      :typeable=\"true\"\n      :hideInput=\"false\"\n    >\n    </appdate-picker>\n  </template>";var script="<script lang=\"js\">\n  import { ref } from 'vue';\n  export default {\n    setup(){\n      const dateSelected = ref(new Date())\n      return {\n        dateSelected\n      }\n    }\n  }\n  <script>";return{dateSelected:dateSelected,template:template,script:script,customClass:customClass};}});var _hoisted_1$5=/*#__PURE__*/createTextVNode(" Typeable ");var _hoisted_2$5={class:"flex-block"};function render$8(_ctx,_cache,$props,$setup,$data,$options){var _component_appdate_picker=resolveComponent("appdate-picker");var _component_Wrapper=resolveComponent("Wrapper");return openBlock(),createBlock(_component_Wrapper,{templatecontent:_ctx.template,scriptcontent:_ctx.script},{label:withCtx(function(){return[_hoisted_1$5];}),content:withCtx(function(){return[createVNode("div",_hoisted_2$5,[createVNode(_component_appdate_picker,{"input-class":_ctx.customClass,placeholder:"YYYY-MM-DD",typeable:true,hideInput:false,onInput:_ctx.dateSelected},null,8/* PROPS */,["input-class","onInput"])])];}),_:1},8/* PROPS */,["templatecontent","scriptcontent"]);}script$7.render=render$8;script$7.__file="src/components/examples/Typeable.vue";var script$8=defineComponent({name:'Disabled',components:{Wrapper:script,'appdate-picker':script$6},setup:function setup(){var dateSelected=ref(new Date());var preventDisableDateSelection=true;var template="<template>\n    <appdate-picker\n      placeholder=\"Select Date\"\n      :disabled-dates=\"{\n        to: new Date(2020, 10, 5),\n        from: new Date(2020, 10, 16),\n        dates: [\n            new Date(2020, 10, 10),\n            new Date(2020, 10, 11),\n          ],\n      }\"\n      :prevent-disable-date-selection=\"preventDisableDateSelection\"\n    >\n    </appdate-picker>\n  </template>";var script="<script lang=\"js\">\n  import { ref } from 'vue';\n  export default {\n    setup(){\n      const dateSelected = ref(new Date())\n      const preventDisableDateSelection = true\n      return {\n        dateSelected,\n        preventDisableDateSelection\n      }\n    }\n  }\n  <script>";return{script:script,template:template,dateSelected:dateSelected,preventDisableDateSelection:preventDisableDateSelection};}});var _hoisted_1$6=/*#__PURE__*/createTextVNode(" Disabled ");var _hoisted_2$6={class:"flex-block"};function render$9(_ctx,_cache,$props,$setup,$data,$options){var _component_appdate_picker=resolveComponent("appdate-picker");var _component_Wrapper=resolveComponent("Wrapper");return openBlock(),createBlock(_component_Wrapper,{templatecontent:_ctx.template,scriptcontent:_ctx.script},{label:withCtx(function(){return[_hoisted_1$6];}),content:withCtx(function(){return[createVNode("div",_hoisted_2$6,[createVNode(_component_appdate_picker,{placeholder:"Select Date",onInput:_ctx.dateSelected,openDate:new Date('2020-11-06'),"disabled-dates":{to:new Date(2020,10,5),from:new Date(2020,10,16),dates:[new Date(2020,10,10),new Date(2020,10,11)]},"prevent-disable-date-selection":_ctx.preventDisableDateSelection},null,8/* PROPS */,["onInput","openDate","disabled-dates","prevent-disable-date-selection"])])];}),_:1},8/* PROPS */,["templatecontent","scriptcontent"]);}script$8.render=render$9;script$8.__file="src/components/examples/Disabled.vue";var script$9=defineComponent({name:'DefaultValue',components:{Wrapper:script,'appdate-picker':script$6},setup:function setup(){var defaultValue=ref(new Date());var template="<template>\n    <appdate-picker\n      placeholder=\"Select Date\"\n      @input=\"dateSelected\"\n      :value=\"defaultValue\"\n    >\n    </appdate-picker>\n  </template>";var script="<script lang=\"js\">\n  import { ref } from 'vue';\n  export default {\n    setup(){\n      const defaultValue = ref(new Date())\n      function dateSelected(payload: Date): void {\n        console.log('dateSelected', payload)\n      }\n      return {\n        dateSelected,\n        defaultValue\n      }\n    }\n  }\n  <script>";/**
+setTypedDate:setTypedDate,handleChangedMonthFromDayPicker:handleChangedMonthFromDayPicker,selectYear:selectYear,selectMonth:selectMonth,selectDisabledDate:selectDisabledDate,clearDate:clearDate,showCalendar:showCalendar,close:close,allowedToShowView:allowedToShowView,showYearCalendar:showYearCalendar,showMonthCalendar:showMonthCalendar,setPageDate:setPageDate,selectDate:selectDate,closeOnClickOutside:closeOnClickOutside,showDayCalendar:showDayCalendar,computedInitialView:computedInitialView,setDate:setDate,setDate1:setDate1,setValue:setValue};}});function render$7(_ctx,_cache,$props,$setup,$data,$options){var _component_date_input=resolveComponent("date-input");var _component_picker_day=resolveComponent("picker-day");var _component_picker_month=resolveComponent("picker-month");var _component_picker_year=resolveComponent("picker-year");var _directive_clickoutside=resolveDirective("clickoutside");return withDirectives((openBlock(),createBlock("div",{class:["vuejs3-datepicker",[_ctx.isRtl?'rtl':'',"vuejs3-".concat(_ctx.theme),_ctx.wrapperClass]]},[createVNode(_component_date_input,{selectedDate:_ctx.selectedDate,resetTypedDate:_ctx.resetTypedDate,format:_ctx.format,translation:_ctx.translation,inline:_ctx.inline,id:_ctx.id,name:_ctx.name,fullMonthName:_ctx.fullMonthName,openDate:_ctx.openDate,placeholder:_ctx.placeholder,inputClass:_ctx.inputClass,typeable:_ctx.typeable,clearButton:_ctx.clearButton,clearButtonIcon:_ctx.clearButtonIcon,calendarButton:_ctx.calendarButton,calendarButtonIcon:_ctx.calendarButtonIcon,calendarButtonIconContent:_ctx.calendarButtonIconContent,disabled:_ctx.disabled,required:_ctx.required,addBootstrapClass:_ctx.addBootstrapClass,"use-utc":_ctx.useUtc,onShowCalendar:_ctx.showCalendar,onCloseCalendar:_ctx.close,onTypedDate:_ctx.setTypedDate,onClearDate:_ctx.clearDate,minimumView:_ctx.minimumView,maximumView:_ctx.maximumView,hideInput:_ctx.hideInput,iconWidth:_ctx.iconWidth,iconHeight:_ctx.iconHeight,iconColor:_ctx.iconColor,theme:_ctx.theme},{belowDate:withCtx(function(){return[renderSlot(_ctx.$slots,"belowDate")];}),_:1},8/* PROPS */,["selectedDate","resetTypedDate","format","translation","inline","id","name","fullMonthName","openDate","placeholder","inputClass","typeable","clearButton","clearButtonIcon","calendarButton","calendarButtonIcon","calendarButtonIconContent","disabled","required","addBootstrapClass","use-utc","onShowCalendar","onCloseCalendar","onTypedDate","onClearDate","minimumView","maximumView","hideInput","iconWidth","iconHeight","iconColor","theme"]),createCommentVNode("Day View  "),_ctx.allowedToShowView('day')?(openBlock(),createBlock(_component_picker_day,{key:0,pageDate:_ctx.pageDate,selectedDate:_ctx.selectedDate,showDayView:_ctx.showDayView,fullMonthName:_ctx.fullMonthName,allowedToShowView:_ctx.allowedToShowView,disabledDates:_ctx.disabledDates,highlighted:_ctx.highlighted,calendarClass:_ctx.calendarClass,calendarStyle:_ctx.calendarStyle,translation:_ctx.translation,pageTimestamp:_ctx.pageTimestamp,isRtl:_ctx.isRtl,mondayFirst:_ctx.mondayFirst,dayCellContent:_ctx.dayCellContent,onChangedMonth:_ctx.handleChangedMonthFromDayPicker,onSelectDate:_ctx.selectDate,onShowMonthCalendar:_ctx.showMonthCalendar,onSelectedDisabled:_ctx.selectDisabledDate,onShowYearCalendar:_ctx.showYearCalendar,minimumView:_ctx.minimumView,maximumView:_ctx.maximumView,preventDisableDateSelection:_ctx.preventDisableDateSelection,theme:_ctx.theme},{customCalendarHeader:withCtx(function(){return[renderSlot(_ctx.$slots,"customCalendarHeader")];}),_:1},8/* PROPS */,["pageDate","selectedDate","showDayView","fullMonthName","allowedToShowView","disabledDates","highlighted","calendarClass","calendarStyle","translation","pageTimestamp","isRtl","mondayFirst","dayCellContent","onChangedMonth","onSelectDate","onShowMonthCalendar","onSelectedDisabled","onShowYearCalendar","minimumView","maximumView","preventDisableDateSelection","theme"])):createCommentVNode("v-if",true),createCommentVNode("Month View "),_ctx.allowedToShowView('month')?(openBlock(),createBlock(_component_picker_month,{key:1,pageDate:_ctx.pageDate,selectedDate:_ctx.selectedDate,showMonthView:_ctx.showMonthView,allowedToShowView:_ctx.allowedToShowView,disabledDates:_ctx.disabledDates,calendarClass:_ctx.calendarClass,calendarStyle:_ctx.calendarStyle,translation:_ctx.translation,isRtl:_ctx.isRtl,"use-utc":_ctx.useUtc,fullMonthName:_ctx.fullMonthName,onSelectMonth:_ctx.selectMonth,onShowYearCalendar:_ctx.showYearCalendar,onChangedYear:_ctx.setPageDate,minimumView:_ctx.minimumView,maximumView:_ctx.maximumView,theme:_ctx.theme},{customCalendarHeader:withCtx(function(){return[renderSlot(_ctx.$slots,"customCalendarHeader")];}),_:1},8/* PROPS */,["pageDate","selectedDate","showMonthView","allowedToShowView","disabledDates","calendarClass","calendarStyle","translation","isRtl","use-utc","fullMonthName","onSelectMonth","onShowYearCalendar","onChangedYear","minimumView","maximumView","theme"])):createCommentVNode("v-if",true),createCommentVNode(" Year View "),_ctx.allowedToShowView('year')?(openBlock(),createBlock(_component_picker_year,{key:2,pageDate:_ctx.pageDate,selectedDate:_ctx.selectedDate,showYearView:_ctx.showYearView,allowedToShowView:_ctx.allowedToShowView,disabledDates:_ctx.disabledDates,calendarClass:_ctx.calendarClass,calendarStyle:_ctx.calendarStyle,translation:_ctx.translation,isRtl:_ctx.isRtl,"use-utc":_ctx.useUtc,onSelectYear:_ctx.selectYear,onChangedDecade:_ctx.setPageDate,fullMonthName:_ctx.fullMonthName,minimumView:_ctx.minimumView,maximumView:_ctx.maximumView,theme:_ctx.theme},{customCalendarHeader:withCtx(function(){return[renderSlot(_ctx.$slots,"customCalendarHeader")];}),_:1},8/* PROPS */,["pageDate","selectedDate","showYearView","allowedToShowView","disabledDates","calendarClass","calendarStyle","translation","isRtl","use-utc","onSelectYear","onChangedDecade","fullMonthName","minimumView","maximumView","theme"])):createCommentVNode("v-if",true)],2/* CLASS */)),[[_directive_clickoutside,{handler:_ctx.inline?null:_ctx.closeOnClickOutside}]]);}var css_248z$3=".rtl{direction:rtl}.vuejs3-datepicker{position:relative;display:inline-block}.vuejs3-datepicker *{box-sizing:border-box}.vuejs3-datepicker input{border:1px solid}.vuejs3-datepicker__icon{display:-webkit-flex;display:-ms-flexbox;display:flex}.vuejs3-datepicker__value{min-width:200px;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;border-radius:5px;padding:13px 15px;cursor:pointer;border:1px solid}.vuejs3-datepicker__content{margin-left:10px;font-size:15px}.vuejs3-datepicker__typeablecalendar{position:absolute;top:10px;left:10px}.vuejs3-datepicker__inputvalue{min-width:200px;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;border-radius:5px;padding:12px 10px 13px 35px;cursor:pointer;border:1px solid}.vuejs3-datepicker__calendar{position:absolute;z-index:100;background:#fff;width:300px;box-shadow:0 .2rem 1rem rgba(0,0,0,.12);border-radius:4px;margin-top:4px}.vuejs3-datepicker__calendar-topbar{background-color:#40b983;color:#fff;border-radius:4px 4px 0 0;padding:25px}.vuejs3-datepicker__calendar-topbar-year{font-size:30px;margin:0;padding-bottom:10px}.vuejs3-datepicker__calendar-topbar-day{font-size:20px;margin:0}.vuejs3-datepicker__calendar-actionarea{padding:10px}.vuejs3-datepicker__calendar header{display:block;line-height:40px}.vuejs3-datepicker__calendar header span{text-align:center;width:71.42857142857143%;float:left}.vuejs3-datepicker__calendar header .next,.vuejs3-datepicker__calendar header .prev{width:14.285714285714286%;float:left;text-indent:-10000px;position:relative}.vuejs3-datepicker__calendar header .next:after,.vuejs3-datepicker__calendar header .prev:after{content:\"\";position:absolute;left:50%;width:8px;height:8px;top:50%;-webkit-transform:translateX(-50%) translateY(-50%) rotate(45deg);transform:translateX(-50%) translateY(-50%) rotate(45deg)}.vuejs3-datepicker__calendar header .prev:after{border-left:1px solid #2f2f2f;border-bottom:1px solid #2f2f2f}.vuejs3-datepicker__calendar header .next.disabled:after,.vuejs3-datepicker__calendar header .prev.disabled:after{opacity:.5}.vuejs3-datepicker__calendar header .next:after{border-top:1px solid #2f2f2f;border-right:1px solid #2f2f2f}.vuejs3-datepicker__calendar header .next:not(.disabled),.vuejs3-datepicker__calendar header .prev:not(.disabled),.vuejs3-datepicker__calendar header .up:not(.disabled){cursor:pointer;font-size:15px;border-radius:4px}.vuejs3-datepicker__calendar header .next:not(.disabled):hover,.vuejs3-datepicker__calendar header .prev:not(.disabled):hover,.vuejs3-datepicker__calendar header .up:not(.disabled):hover{background:#f8f8f8}.vuejs3-datepicker__calendar .disabled{color:#ddd;cursor:default}.vuejs3-datepicker__calendar .flex-rtl{display:-webkit-flex;display:-ms-flexbox;display:flex;width:inherit;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.vuejs3-datepicker__calendar .cell{display:inline-block;padding:0 5px;width:14.285714285714286%;height:40px;line-height:40px;text-align:center;font-size:14px;vertical-align:middle;border:1px solid transparent}.vuejs3-datepicker__calendar .cell.month,.vuejs3-datepicker__calendar .cell.year{padding:10px 5px;height:50px;line-height:28px}.vuejs3-datepicker__calendar .cell.day-header{text-transform:uppercase}.vuejs3-datepicker__calendar .cell:not(.blank):not(.disabled).day,.vuejs3-datepicker__calendar .cell:not(.blank):not(.disabled).month,.vuejs3-datepicker__calendar .cell:not(.blank):not(.disabled).year{cursor:pointer;transition:.45s}.vuejs3-datepicker__calendar .cell:not(.blank):not(.disabled).day:hover,.vuejs3-datepicker__calendar .cell:not(.blank):not(.disabled).month:hover,.vuejs3-datepicker__calendar .cell:not(.blank):not(.disabled).year:hover{border:1px solid #40b983}.vuejs3-datepicker__calendar .cell.selected{background:#40b983;color:#fff}.vuejs3-datepicker__calendar .cell.selected:hover{background:#40b983}.vuejs3-datepicker__calendar .cell.highlighted{background:#40b983;color:#fff}.vuejs3-datepicker__calendar .cell.highlighted.selected{background:#40b983}.vuejs3-datepicker__calendar .cell.highlighted.disabled{color:#a3a3a3}.vuejs3-datepicker__calendar .cell.highlighted.highlight-start,.vuejs3-datepicker__calendar .cell.highlighted:last-child{background:#2f9668}.vuejs3-datepicker__calendar .cell.grey{color:#888}.vuejs3-datepicker__calendar .cell.grey:hover{background:inherit}.vuejs3-datepicker__calendar .cell.day-header{font-size:75%;white-space:nowrap;cursor:inherit}.vuejs3-datepicker__calendar .cell.day-header:hover{background:inherit}.vuejs3-datepicker__calendar .month,.vuejs3-datepicker__calendar .year{width:33.333%}.vuejs3-datepicker__calendar-button,.vuejs3-datepicker__clear-button{cursor:pointer;font-style:normal;position:absolute;top:12px;right:12px}.vuejs3-datepicker__calendar-button.disabled,.vuejs3-datepicker__clear-button.disabled{color:#999;cursor:default}.vuejs3-datepicker #calendar-div{background-color:#fff;border-radius:5px}.dp-error{color:red;font-size:12px}.backdrop{position:fixed;display:none;width:100%;height:100%;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.5);z-index:2;cursor:pointer}";styleInject(css_248z$3);script$6.render=render$7;script$6.__file="src/components/datepicker/Datepicker.vue";var script$7=defineComponent({name:'Typeable',components:{Wrapper:script,'appdate-picker':script$6},setup:function setup(){var dateSelected=ref(new Date());var customClass='customClass';var template="<template>\n    <appdate-picker\n      :full-month-name=\"true\"\n      input-class=\"customClass\"\n      placeholder=\"YYYY-MM-DD\"\n      :typeable=\"true\"\n      :hideInput=\"false\"\n    >\n    </appdate-picker>\n  </template>";var script="<script lang=\"js\">\n  import { ref } from 'vue';\n  export default {\n    setup(){\n      const dateSelected = ref(new Date())\n      return {\n        dateSelected\n      }\n    }\n  }\n  <script>";return{dateSelected:dateSelected,template:template,script:script,customClass:customClass};}});var _hoisted_1$5=/*#__PURE__*/createTextVNode(" Typeable ");var _hoisted_2$5={class:"flex-block"};function render$8(_ctx,_cache,$props,$setup,$data,$options){var _component_appdate_picker=resolveComponent("appdate-picker");var _component_Wrapper=resolveComponent("Wrapper");return openBlock(),createBlock(_component_Wrapper,{templatecontent:_ctx.template,scriptcontent:_ctx.script},{label:withCtx(function(){return[_hoisted_1$5];}),content:withCtx(function(){return[createVNode("div",_hoisted_2$5,[createVNode(_component_appdate_picker,{"input-class":_ctx.customClass,placeholder:"YYYY-MM-DD",typeable:true,hideInput:false,onInput:_ctx.dateSelected},null,8/* PROPS */,["input-class","onInput"])])];}),_:1},8/* PROPS */,["templatecontent","scriptcontent"]);}script$7.render=render$8;script$7.__file="src/components/examples/Typeable.vue";var script$8=defineComponent({name:'Disabled',components:{Wrapper:script,'appdate-picker':script$6},setup:function setup(){var dateSelected=ref(new Date());var preventDisableDateSelection=true;var template="<template>\n    <appdate-picker\n      placeholder=\"Select Date\"\n      :disabled-dates=\"{\n        to: new Date(2020, 10, 5),\n        from: new Date(2020, 10, 16),\n        dates: [\n            new Date(2020, 10, 10),\n            new Date(2020, 10, 11),\n          ],\n      }\"\n      :prevent-disable-date-selection=\"preventDisableDateSelection\"\n    >\n    </appdate-picker>\n  </template>";var script="<script lang=\"js\">\n  import { ref } from 'vue';\n  export default {\n    setup(){\n      const dateSelected = ref(new Date())\n      const preventDisableDateSelection = true\n      return {\n        dateSelected,\n        preventDisableDateSelection\n      }\n    }\n  }\n  <script>";return{script:script,template:template,dateSelected:dateSelected,preventDisableDateSelection:preventDisableDateSelection};}});var _hoisted_1$6=/*#__PURE__*/createTextVNode(" Disabled ");var _hoisted_2$6={class:"flex-block"};function render$9(_ctx,_cache,$props,$setup,$data,$options){var _component_appdate_picker=resolveComponent("appdate-picker");var _component_Wrapper=resolveComponent("Wrapper");return openBlock(),createBlock(_component_Wrapper,{templatecontent:_ctx.template,scriptcontent:_ctx.script},{label:withCtx(function(){return[_hoisted_1$6];}),content:withCtx(function(){return[createVNode("div",_hoisted_2$6,[createVNode(_component_appdate_picker,{placeholder:"Select Date",onInput:_ctx.dateSelected,openDate:new Date('2020-11-06'),"disabled-dates":{to:new Date(2020,10,5),from:new Date(2020,10,16),dates:[new Date(2020,10,10),new Date(2020,10,11)]},"prevent-disable-date-selection":_ctx.preventDisableDateSelection},null,8/* PROPS */,["onInput","openDate","disabled-dates","prevent-disable-date-selection"])])];}),_:1},8/* PROPS */,["templatecontent","scriptcontent"]);}script$8.render=render$9;script$8.__file="src/components/examples/Disabled.vue";var script$9=defineComponent({name:'DefaultValue',components:{Wrapper:script,'appdate-picker':script$6},setup:function setup(){var defaultValue=ref(new Date());var template="<template>\n    <appdate-picker\n      placeholder=\"Select Date\"\n      @input=\"dateSelected\"\n      :value=\"defaultValue\"\n    >\n    </appdate-picker>\n  </template>";var script="<script lang=\"js\">\n  import { ref } from 'vue';\n  export default {\n    setup(){\n      const defaultValue = ref(new Date())\n      function dateSelected(payload: Date): void {\n        console.log('dateSelected', payload)\n      }\n      return {\n        dateSelected,\n        defaultValue\n      }\n    }\n  }\n  <script>";/**
          * Change default Value of ref
          */function changeDefaultValue(){defaultValue.value=new Date('2021-10-10');}/**
          * Handler for select-day function
@@ -1917,7 +1917,9 @@ setTypedDate:setTypedDate,handleChangedMonthFromDayPicker:handleChangedMonthFrom
          * Handler to change value od v-model
          */function changeValue(){dateinput.value=new Date('2021-01-01');}/**
          * Handler for select-day function
-         */function dateSelected(payload){console.log(payload);}return{dateinput:dateinput,changeValue:changeValue,dateSelected:dateSelected,template:template,script:script};}});var _hoisted_1$e=/*#__PURE__*/createTextVNode(" V-Model ");var _hoisted_2$e={class:"flex-block"};var _hoisted_3$6={class:"change-btn"};function render$h(_ctx,_cache,$props,$setup,$data,$options){var _component_appdate_picker=resolveComponent("appdate-picker");var _component_Wrapper=resolveComponent("Wrapper");return openBlock(),createBlock(_component_Wrapper,{templatecontent:_ctx.template,scriptcontent:_ctx.script},{label:withCtx(function(){return[_hoisted_1$e];}),content:withCtx(function(){return[createVNode("div",_hoisted_2$e,[createVNode(_component_appdate_picker,{modelValue:_ctx.dateinput,"onUpdate:modelValue":[_cache[1]||(_cache[1]=function($event){return _ctx.dateinput=$event;}),_ctx.dateSelected],clearButton:true},null,8/* PROPS */,["modelValue","onUpdate:modelValue"]),createVNode("div",_hoisted_3$6,[createVNode("button",{onClick:_cache[2]||(_cache[2]=function(){return _ctx.changeValue.apply(_ctx,arguments);})},"Change Value"),createVNode("p",null,"UpdateValue : "+toDisplayString(_ctx.dateinput),1/* TEXT */)])])];}),_:1},8/* PROPS */,["templatecontent","scriptcontent"]);}script$g.render=render$h;script$g.__file="src/components/examples/VModel.vue";var script$h=defineComponent({name:'ProgrammaticAccess',components:{Wrapper:script,'appdate-picker':script$6},setup:function setup(){var template="<appdate-picker\n        :ref=\"(el) => {\n          inputRef = el;\n        }\"\n      >\n      </appdate-picker>\n      <div class=\"change-btn\">\n        <button @click=\"accessDatePicker\">\n          Access DatePicker\n        </button>\n      </div>";var script="<script lang=\"js\">\n  import { ref } from 'vue';\n  export default {\n    setup(){\n      const inputRef = ref(null);\n      function accessDatePicker(): void {\n        (inputRef.value).value\n      }\n      return {inputRef,accessDatePicker}\n    }\n  }\n  <script>";var inputRef=ref(null);var accessValue=ref(null);/**
+         */function dateSelected(payload){console.log(payload);}/**
+         * clear date handler
+         */function handleClearDate(){console.log('clear date event triggered');}return{dateinput:dateinput,changeValue:changeValue,dateSelected:dateSelected,template:template,script:script,handleClearDate:handleClearDate};}});var _hoisted_1$e=/*#__PURE__*/createTextVNode(" V-Model ");var _hoisted_2$e={class:"flex-block"};var _hoisted_3$6={class:"change-btn"};function render$h(_ctx,_cache,$props,$setup,$data,$options){var _component_appdate_picker=resolveComponent("appdate-picker");var _component_Wrapper=resolveComponent("Wrapper");return openBlock(),createBlock(_component_Wrapper,{templatecontent:_ctx.template,scriptcontent:_ctx.script},{label:withCtx(function(){return[_hoisted_1$e];}),content:withCtx(function(){return[createVNode("div",_hoisted_2$e,[createVNode(_component_appdate_picker,{modelValue:_ctx.dateinput,"onUpdate:modelValue":[_cache[1]||(_cache[1]=function($event){return _ctx.dateinput=$event;}),_ctx.dateSelected],clearButton:true,onCleared:_ctx.handleClearDate},null,8/* PROPS */,["modelValue","onUpdate:modelValue","onCleared"]),createVNode("div",_hoisted_3$6,[createVNode("button",{onClick:_cache[2]||(_cache[2]=function(){return _ctx.changeValue.apply(_ctx,arguments);})},"Change Value"),createVNode("p",null,"UpdateValue : "+toDisplayString(_ctx.dateinput),1/* TEXT */)])])];}),_:1},8/* PROPS */,["templatecontent","scriptcontent"]);}script$g.render=render$h;script$g.__file="src/components/examples/VModel.vue";var script$h=defineComponent({name:'ProgrammaticAccess',components:{Wrapper:script,'appdate-picker':script$6},setup:function setup(){var template="<appdate-picker\n        :ref=\"(el) => {\n          inputRef = el;\n        }\"\n      >\n      </appdate-picker>\n      <div class=\"change-btn\">\n        <button @click=\"accessDatePicker\">\n          Access DatePicker\n        </button>\n      </div>";var script="<script lang=\"js\">\n  import { ref } from 'vue';\n  export default {\n    setup(){\n      const inputRef = ref(null);\n      function accessDatePicker(): void {\n        (inputRef.value).value\n      }\n      return {inputRef,accessDatePicker}\n    }\n  }\n  <script>";var inputRef=ref(null);var accessValue=ref(null);/**
          * Handler for programmatic access of selected date
          */function accessDatePicker(){var value=inputRef.value.selectedDate;accessValue.value=value;}return{inputRef:inputRef,template:template,script:script,accessDatePicker:accessDatePicker,accessValue:accessValue};}});var _hoisted_1$f=/*#__PURE__*/createTextVNode(" Programmatic Access ");var _hoisted_2$f={class:"flex-block"};var _hoisted_3$7={class:"change-btn"};function render$i(_ctx,_cache,$props,$setup,$data,$options){var _component_appdate_picker=resolveComponent("appdate-picker");var _component_Wrapper=resolveComponent("Wrapper");return openBlock(),createBlock(_component_Wrapper,{templatecontent:_ctx.template,scriptcontent:_ctx.script},{label:withCtx(function(){return[_hoisted_1$f];}),content:withCtx(function(){return[createVNode("div",_hoisted_2$f,[createVNode(_component_appdate_picker,{ref:function ref(el){_ctx.inputRef=el;}},null,512/* NEED_PATCH */),createVNode("div",_hoisted_3$7,[createVNode("button",{onClick:_cache[1]||(_cache[1]=function(){return _ctx.accessDatePicker.apply(_ctx,arguments);})},"Access DatePicker"),createVNode("p",null,"Value : "+toDisplayString(_ctx.accessValue),1/* TEXT */)])])];}),_:1},8/* PROPS */,["templatecontent","scriptcontent"]);}script$h.render=render$i;script$h.__file="src/components/examples/ProgrammaticAccess.vue";var script$i=defineComponent({name:'Slot View',components:{Wrapper:script,'appdate-picker':script$6},setup:function setup(){var defaultValue=ref(new Date());var template="<template>\n    <appdate-picker\n      placeholder=\"Select Date\"\n      @input=\"dateSelected\"\n      :value=\"defaultValue\"\n    >\n    <template v-slot:belowDate>\n      <p>Below Date Input</p>\n    </template>\n    <template v-slot:customCalendarHeader>\n      <p>Before Calendar Header Slot</p>\n    </template>\n    </appdate-picker>\n  </template>";var script="<script lang=\"js\">\n  import { ref } from 'vue';\n  export default {\n    setup(){\n      const defaultValue = ref(new Date())\n      function dateSelected(payload: Date): void {\n        console.log('dateSelected', payload)\n      }\n      return {\n        dateSelected,\n        defaultValue\n      }\n    }\n  }\n  <script>";/**
          * Change default Value of ref
diff --git a/src/components/examples/VModel.vue b/src/components/examples/VModel.vue
index f25a3b6..5fbb6d9 100644
--- a/src/components/examples/VModel.vue
+++ b/src/components/examples/VModel.vue
@@ -5,7 +5,12 @@
     </template>
     <template v-slot:content>
       <div class="flex-block">
-        <appdate-picker v-model="dateinput" @update:modelValue="dateSelected" :clearButton="true" />
+        <appdate-picker
+          v-model="dateinput"
+          @update:modelValue="dateSelected"
+          :clearButton="true"
+          @cleared="handleClearDate"
+        />
         <div class="change-btn">
           <button @click="changeValue">Change Value</button>
           <p>UpdateValue : {{ dateinput }}</p>
@@ -59,12 +64,20 @@ export default defineComponent({
       console.log(payload);
     }
 
+    /**
+     * clear date handler
+     */
+    function handleClearDate(): void {
+      console.log('clear date event triggered');
+    }
+
     return {
       dateinput,
       changeValue,
       dateSelected,
       template,
       script,
+      handleClearDate,
     };
   },
 });