Bump to 1.0.8

README.md

@@ -1,31 +1,44 @@
 # vue-easy-range-date-picker
 
-> A simple and easy-to-use range datepicker based on Vue2
+> A simple and easy-to-use range date picker based on Vue2
 
 # Installation
 
 ```bash
 npm install --save vue-easy-range-date-picker
 ```
-# Demo
-<img src="./images/demo.png" width="650px"/>
-
-[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/vue-template-kgm6v?file=/src/App.vue)
-
 
 # Usage
-
-## ES6 Modules
-
 ```js
+<template>
+ <RangeDatePicker v-model="dates"/>
+</template>
+
+<script>
 import RangeDatePicker from 'vue-easy-range-date-picker';
-```
 
-```html
-<range-date-picker v-model="dates"/>
+export default {
+ components: {
+ RangeDatePicker,
+ },
+ data() {
+ return {
+ dates: {
+ start: 1572879600000,
+ end: 1575730800000
+ },
+ };
+ },
+}
+</script>
 ```
 
-# Props API
+# Demo
+<img src="./images/demo.png" width="650px"/>
+
+[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/dates-with-start-and-end-kgm6v?file=/src/App.vue)
+
+# Props
 | Props | Type | Required | Default |
 | ---------------------| -------------| -------- | ------------|
 | v-model(1) | Object | yes | null |
@@ -34,7 +47,7 @@ import RangeDatePicker from 'vue-easy-range-date-picker';
 | colorSelected(3) | String | no | '#34495e' |
 | colorActive(3) | String | no | '#41b883' |
 
-(1) v-model: Bind to an Object which contains start timestamp and end timestamp: 
+(1) v-model: Binding an object which contains start timestamp and end timestamp: 
 ```js
 // example
 dates: { 
@@ -43,16 +56,38 @@ dates: {
 }
 ```
 you can also pass an empty object as the default value like this:
-```html
-<range-date-picker v-model="{}"/>
+```js
+<template>
+ <RangeDatePicker v-model="dates"/>
+</template>
+
+<script>
+import RangeDatePicker from 'vue-easy-range-date-picker';
+
+export default {
+ components: {
+ RangeDatePicker,
+ },
+ data() {
+ return {
+ dates: {},
+ };
+ },
+}
+</script>
 ```
+
+<img src="./images/demo-empty-dates.png" width="650px"/>
+
+[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/initial-empty-dates-wso98o?file=/src/App.vue)
+
 (2) Now supporting Chinese('zh'), Japanese('jp'), English('en')
 
 (3)
 
 <img src="./images/color.png" width="650px"/>
 
-# Events
+# Event
 
 `closePicker` event will be emitted when both the start date and end date are selected.