add cancel and clear event

README.md

@@ -89,6 +89,7 @@ The `dist` folder contains `vue-datepicker-local.js` and `vue-datepicker-local.c
 | Event Name     | Description                                      |  Parameters                          |
 |:---------------|:-------------------------------------------------|:-------------------------------------|
 | confirm        |triggers when user confirms                       |  the value component's binding value |
-
+| cancel         |triggers when user click the cancel button        | --                                   |
+| clear          |triggers when user click the clear button         | --                                   |
 ## License
 vue-datepicker-local is licensed under [The MIT License](LICENSE).

example/App.vue

@@ -1,14 +1,14 @@
 <template>
 <div>
-  <vue-datepicker-local v-model="timeRange" format="YYYY-MM-DD HH:mm:ss" :disabled-date="disabledDate"/><br/>
+  <vue-datepicker-local v-model="timeRange" format="YYYY-MM-DD HH:mm:ss" :disabled-date="disabledDate" @input="change"/><br/>
   <vue-datepicker-local v-model="timeRange" format="YYYY-MM-DD HH:mm:ss" :disabled-date="disabledDate" :local="local" range-separator="至"/><br/>
-  <vue-datepicker-local v-model="timeRange" format="YYYY-MM-DD HH:mm:ss" :disabled-date="disabledDate" :local="local" show-buttons @confirm="selectedDate"/><br/>
+  <vue-datepicker-local v-model="timeRange" format="YYYY-MM-DD HH:mm:ss" :disabled-date="disabledDate" :local="local" show-buttons @confirm="selectedDate" clearable @cancel="cancel" @clear="clear"/><br/>
   <vue-datepicker-local v-model="time" format="YYYY-MMM-DD" :local="local" /><br/>
   <vue-datepicker-local v-model="time" format="YYYY-MM" show-buttons @confirm="selectedDate"/><br/>
   <vue-datepicker-local v-model="time" format="YYYY"/><br/>
   <vue-datepicker-local v-model="empty" format="YYYY-MM-DD HH:mm:ss" clearable placeholder="select date"/><br/>
   <vue-datepicker-local v-model="now" disabled/>
-  
+
 </div>
 </template>
 
@@ -27,7 +27,7 @@ export default {
       max: max,
       timeRange: [min, max],
       local: {
-        dow: 4, // Sunday is the first day of the week
+        dow: 7, // Sunday is the first day of the week
         hourTip: 'Select Hour', // tip of select hour
         minuteTip: 'Select Minute', // tip of select minute
         secondTip: 'Select Second', // tip of select second
@@ -47,6 +47,15 @@ export default {
     selectedDate (date) {
       console.log('You have been selected:')
       console.log(date)
+    },
+    clear () {
+      console.log('clear')
+    },
+    cancel () {
+      console.log('cancel')
+    },
+    change (val) {
+      console.log(val)
     }
   }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-datepicker-local",
-  "version": "1.0.14",
+  "version": "1.0.15",
   "description": "A datepicker for Vue.js",
   "main": "src/index.js",
   "files": [

src/VueDatepickerLocal.vue

@@ -107,6 +107,7 @@ export default {
       return Array.isArray(this.value) ? this.dates : this.dates[0]
     },
     cls () {
+      this.$emit('clear')
       this.$emit('input', this.range ? [] : '')
     },
     vi (val) {
@@ -161,6 +162,7 @@ export default {
       this.show = false
     },
     cancel () {
+      this.$emit('cancel')
       this.show = false
     }
   },

webpack.config.js

@@ -2,7 +2,7 @@ const path = require('path')
 const webpack = require('webpack')
 const ExtractTextPlugin = require('extract-text-webpack-plugin')
 const banner =
-  'vue-datetime-local.js v1.0.14\n' +
+  'vue-datetime-local.js v1.0.15\n' +
   '(c) 2017-' + new Date().getFullYear() + ' weifeiyue\n' +
   'Released under the MIT License.'
 module.exports = {