Merge pull request #56 from shubhadip/clear-btn-fix

fix: clear button functionality fix

.eslintcache

@@ -1 +1 @@
-[{"/Users/shubhadipmaity/projects/vuejs3-datepicker/src/App.vue":"1"},{"size":4144,"mtime":1667540200834}]
+[{"/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}]

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vuejs3-datepicker",
-  "version": "1.0.11",
+  "version": "1.0.14",
   "description": "Vue 3 datepicker",
   "files": [
     "dist/*",

src/components/datepicker/DateInput.vue

@@ -288,6 +288,7 @@ export default defineComponent({
       parseTypedDate,
       inputBlurred,
       inputRef,
+      clearDate,
     };
   },
 });

src/components/datepicker/datepicker.css

@@ -28,7 +28,6 @@
     margin-left: 10px;
     font-size: 15px;
   }
-
   &__typeablecalendar{
     position: absolute;
     top: 10px;
@@ -187,6 +186,9 @@
   &__clear-button, &__calendar-button{
     cursor: pointer;
     font-style: normal;
+    position: absolute;
+    top: 12px;
+    right:12px;
     &.disabled {
       color: #999;
       cursor: default;

src/components/datepicker/locale/index.ts

@@ -488,8 +488,8 @@ export const vn = (): ILocale => {
     'Tháng 11',
     'Tháng 12',
   ];
-  const days = ['CN', 'H', 'B', 'T', 'N', 'S', 'B']
-  const daysNames = ['CN', 'Thứ Hai', 'Thứ Ba', 'Thứ Tư', 'Thứ Năm', 'Thứ Sáu', 'Thứ Bảy']
+  const days = ['CN', 'H', 'B', 'T', 'N', 'S', 'B'];
+  const daysNames = ['CN', 'Thứ Hai', 'Thứ Ba', 'Thứ Tư', 'Thứ Năm', 'Thứ Sáu', 'Thứ Bảy'];
   const rtl = false;
   const ymd = false;
   const yearSuffix = '';

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" />
+        <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>
@@ -29,7 +34,7 @@ export default defineComponent({
   setup() {
     const dateinput = ref(new Date());
     const template = `<appdate-picker
-  v-model="dateinput" 
+  v-model="dateinput"
   @update:modelValue="dateSelected"
 />`;
 
@@ -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,
     };
   },
 });