From 9d76b22e98f19076b9ae38f1944841b0ff07df07 Mon Sep 17 00:00:00 2001
From: "tah3r.a" <tah3r.a@gmail.com>
Date: Mon, 7 Aug 2017 00:41:08 +0430
Subject: [PATCH] Adding clear button.

---
 vue-datepicker-1.vue     | 15 +++++++++++++--
 vue-datepicker-es6.vue   | 15 +++++++++++++--
 vue-datepicker.es6-1.vue | 15 +++++++++++++--
 vue-datepicker.vue       | 15 +++++++++++++--
 4 files changed, 52 insertions(+), 8 deletions(-)

diff --git a/vue-datepicker-1.vue b/vue-datepicker-1.vue
index c9d5978..a7b2bf2 100644
--- a/vue-datepicker-1.vue
+++ b/vue-datepicker-1.vue
@@ -421,6 +421,7 @@ table {
           </div>
         </div>
         <div class="button-box">
+          <span v-if="false !== option.showClearButton" @click="clear">{{ null != option.buttons && null != option.buttons.clear ? option.buttons.clear : 'Clear' }}</span>
           <span @click="showInfo.check=false">{{option.buttons? option.buttons.cancel : 'Cancel' }}</span>
           <span @click="picked">{{option.buttons? option.buttons.ok : 'Ok'}}</span>
         </div>
@@ -477,10 +478,12 @@ exports.default = {
           placeholder: 'when?',
           buttons: {
             ok: 'OK',
-            cancel: 'Cancel'
+            cancel: 'Cancel',
+            clear: 'Clear'
           },
           overlayOpacity: 0.5,
-          dismissible: true
+          dismissible: true,
+          showClearButton: true
         };
       }
     },
@@ -872,6 +875,14 @@ exports.default = {
         }
       }
     },
+    clear: function clear() {
+      this.time = '';
+      if (this.option.type !== 'day' && this.option.type !== 'min') {
+        this.selectedDays = [];
+      }
+      this.showInfo.check = false;
+      this.$emit('change', this.time);
+    },
     shiftActTime: function shiftActTime() {
       // shift activated time items to visible position.
       this.$nextTick(function () {
diff --git a/vue-datepicker-es6.vue b/vue-datepicker-es6.vue
index 022d0ef..751db89 100644
--- a/vue-datepicker-es6.vue
+++ b/vue-datepicker-es6.vue
@@ -364,6 +364,7 @@ table {
           </div>
         </div>
         <div class="button-box">
+          <span v-if="false !== option.showClearButton" @click="clear">{{ null != option.buttons && null != option.buttons.clear ? option.buttons.clear : 'Clear' }}</span>
           <span @click="showInfo.check=false">{{option.buttons? option.buttons.cancel : 'Cancel' }}</span>
           <span @click="picked">{{option.buttons? option.buttons.ok : 'Ok'}}</span>
         </div>
@@ -409,10 +410,12 @@ export default {
           placeholder: 'when?',
           buttons: {
             ok: 'OK',
-            cancel: 'Cancel'
+            cancel: 'Cancel',
+            clear: 'Clear'
           },
           overlayOpacity: 0.5,
-          dismissible: true
+          dismissible: true,
+          showClearButton: true
         }
       }
     },
@@ -752,6 +755,14 @@ export default {
         }
       }
     },
+    clear () {
+      this.date.time = ''
+      if (this.option.type !== 'day' && this.option.type !== 'min') {
+        this.selectedDays = []
+      }
+      this.showInfo.check = false
+      this.$emit('change', this.date.time)
+    },
     shiftActTime () {
       // shift activated time items to visible position.
       this.$nextTick(() => {
diff --git a/vue-datepicker.es6-1.vue b/vue-datepicker.es6-1.vue
index b7c2248..c98a598 100644
--- a/vue-datepicker.es6-1.vue
+++ b/vue-datepicker.es6-1.vue
@@ -416,6 +416,7 @@ table {
           </div>
         </div>
         <div class="button-box">
+          <span v-if="false !== option.showClearButton" @click="clear">{{ null != option.buttons && null != option.buttons.clear ? option.buttons.clear : 'Clear' }}</span>
           <span @click="showInfo.check=false">{{option.buttons? option.buttons.cancel : 'Cancel' }}</span>
           <span @click="picked">{{option.buttons? option.buttons.ok : 'Ok'}}</span>
         </div>
@@ -461,10 +462,12 @@ export default {
           placeholder: 'when?',
           buttons: {
             ok: 'OK',
-            cancel: 'Cancel'
+            cancel: 'Cancel',
+            clear: 'Clear'
           },
           overlayOpacity: 0.5,
-          dismissible: true
+          dismissible: true,
+          showClearButton: true
         }
       }
     },
@@ -805,6 +808,14 @@ export default {
         }
       }
     },
+    clear () {
+      this.time = ''
+      if (this.option.type !== 'day' && this.option.type !== 'min') {
+        this.selectedDays = []
+      }
+      this.showInfo.check = false
+      this.$emit('change', this.time)
+    },
     shiftActTime () {
       // shift activated time items to visible position.
       this.$nextTick(() => {
diff --git a/vue-datepicker.vue b/vue-datepicker.vue
index 4327ae1..da69fac 100644
--- a/vue-datepicker.vue
+++ b/vue-datepicker.vue
@@ -364,6 +364,7 @@ table {
           </div>
         </div>
         <div class="button-box">
+          <span v-if="false !== option.showClearButton" @click="clear">{{ null != option.buttons && null != option.buttons.clear ? option.buttons.clear : 'Clear' }}</span>
           <span @click="showInfo.check=false">{{option.buttons? option.buttons.cancel : 'Cancel' }}</span>
           <span @click="picked">{{option.buttons? option.buttons.ok : 'Ok'}}</span>
         </div>
@@ -420,10 +421,12 @@ exports.default = {
           placeholder: 'when?',
           buttons: {
             ok: 'OK',
-            cancel: 'Cancel'
+            cancel: 'Cancel',
+            clear: 'Clear'
           },
           overlayOpacity: 0.5,
-          dismissible: true
+          dismissible: true,
+          showClearButton: true
         };
       }
     },
@@ -815,6 +818,14 @@ exports.default = {
         }
       }
     },
+    clear: function clear() {
+      this.date.time = '';
+      if (this.option.type !== 'day' && this.option.type !== 'min') {
+        this.selectedDays = [];
+      }
+      this.showInfo.check = false;
+      this.$emit('change', this.date.time);
+    },
     shiftActTime: function shiftActTime() {
       // shift activated time items to visible position.
       this.$nextTick(function () {