support v-model

Author: ParadeTo

demo/index.html

@@ -88,7 +88,7 @@ <h2>calendar</h2>
                   :days-disabled-end="daysDisabledEnd"
                   :disabled-func="disabledFunc"
                   :first-day-of-week="1"
-                  :sync-date.sync="date"
+                  v-model="date"
                   :lang="lang" @change="onChange"></calendar>
         <button @click.stop.prevent="setDate(-1)">Yesterday</button>
         <button @click.stop.prevent="setDate(0)">Today</button>
@@ -179,7 +179,7 @@ <h2>date-range</h2>
                 class="calendar"
                 :days-disabled-start="daysDisabledStart"
                 :days-disabled-end="daysDisabledEnd"
-                :sync-range="range"
+                v-model="range"
                 :lang="lang" @change="onChange"></daterange>
         <button @click.stop.prevent="setRange(-7)">Last 7 days</button>
         <button @click.stop.prevent="setRange(-30)">Last 1 month</button>
@@ -213,7 +213,6 @@ <h2>date-range</h2>
                   },
                   setRange (p) {
                     if (typeof p === 'number') {
-                      console.log(p)
                       this.range = {
                         startDate: moment().add(p, 'days'),
                         endDate: moment()
@@ -264,7 +263,6 @@ <h2>custom style</h2>
             daysDisabledEnd: moment('2017-06-16'),
             disabledFunc: function (dayMoment) {
               var date = dayMoment.date()
-              console.log(date)
               if (date % 2 === 1) {
                 return true
               }
@@ -340,7 +338,6 @@ <h2>custom style</h2>
           },
           setRange (p) {
             if (typeof p === 'number') {
-              console.log(p)
               this.range = {
                 startDate: moment().add(p, 'days'),
                 endDate: moment()

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-date-range",
-  "version": "2.2.1",
-  "description": "A vue component for choosing dates and date ranges. Uses Moment.js for date operations.",
+  "version": "2.2.2",
+  "description": "A vue component for choosing dates and date ranges. Uses Moment.js for date operations. Support Chinese lunar.",
   "main": "dist/vue-date-range.min.js",
   "scripts": {
     "test": "karma start --single-run",

readme.md

@@ -18,7 +18,7 @@ A vue component for choosing dates and date ranges. Uses Moment.js for date oper
           :show-lunar="true"
           :first-day-of-week="1"
           :disable-days-before-today="disableDaysBeforeToday"
-          :default-date="date"
+          :sync-date.sync="date"
           :lang="lang" @change="onChange"></calendar>
 ...
 import {Calendar} from 'vue-date-range';
@@ -43,7 +43,7 @@ export default {
 
 ### DateRange
 ```
-<daterange class="calendar" :default-range="range" :lang="lang" @change="onChange"></daterange>
+<daterange class="calendar" :sync-range.sync="range" :lang="lang" @change="onChange"></daterange>
 ...
 import {DateRange} from 'vue-date-range';
 export default {
@@ -158,8 +158,15 @@ Download vue-date-range.min.js from dist/ and import in your web page. Example:
 # .sync
 For Vue2.3.0+, we can use [`.sync` modifier](https://vuejs.org/v2/guide/components.html#sync-Modifier):
 ```javascript
-<calendar sync-date.sync="date"></calendar>
-<date-range sync-range.sync="range"></date-range>
+<calendar :sync-date.sync="date"></calendar>
+<date-range :sync-range.sync="range"></date-range>
+```
+
+# v-model
+We can also use [`v-model` modifier](https://vuejs.org/v2/guide/components.html#Form-Input-Components-using-Custom-Events) (these can be configured in 2.2.0+):
+```javascript
+<calendar v-model="date"></calendar>
+<date-range v-model="range"></date-range>
 ```
 
 # Props
@@ -213,7 +220,7 @@ For Vue2.3.0+, we can use [`.sync` modifier](https://vuejs.org/v2/guide/componen
 
 * sync-date: The default selected date. Can be used as the “two-way binding” for date (Vue 2.3.0+). e.g.:
   ```html
-  <calendar sync-date.sync="date"></calendar>
+  <calendar :sync-date.sync="date"></calendar>
   ```
 * ~~default-date: Init the selected date. Only for Calendar.~~(use syncDate instead)
 * range: The selected date range. e.g.: 
@@ -228,6 +235,6 @@ Also it has its specific props:
 
 * sync-range: The default date range. Can be used as the “two-way binding” for range (Vue 2.3.0+). e.g.:
   ```html
-  <date-range sync-range.sync="range"></date-range>
+  <date-range :sync-range.sync="range"></date-range>
   ```
 * ~~defaultRange: Used to init the date range~~

src/Calendar.vue

@@ -79,6 +79,9 @@
 //      },
       syncDate: {
         type: Object
+      },
+      value: {
+        type: Object
       }
     },
     data () {
@@ -99,6 +102,10 @@
       syncDate (val) {
         this.date = val
         this.resetDayOfMonth()
+      },
+      value (val) {
+        this.date = val
+        this.resetDayOfMonth()
       }
     },
     created () {
@@ -216,7 +223,9 @@
       },
       handleDayClick (day) {
         this.date = day.dayMoment
+        // to support three ways to get value
         this.$emit('update:syncDate', day.dayMoment)
+        this.$emit('input', day.dayMoment)
         this.$emit('change', day.dayMoment)
       },
       changeMonth (delta) {

src/DateRange.vue

@@ -57,6 +57,9 @@
 //      }
       syncRange: {
         type: Object
+      },
+      value: {
+        type: Object
       }
     },
     data () {
@@ -73,6 +76,10 @@
       syncRange (val) {
         this.rangeData = val
         this.step = 0
+      },
+      value (val) {
+        this.rangeData = val
+        this.step = 0
       }
     },
     methods: {
@@ -97,7 +104,9 @@
         const eTs = this.rangeData.endDate.unix()
         const startDate = sTs <= eTs ? this.rangeData.startDate : this.rangeData.endDate
         const endDate = sTs > eTs ? this.rangeData.startDate : this.rangeData.endDate
+        // to support three ways to get value
         this.$emit('update:syncRange', {startDate, endDate})
+        this.$emit('input', {startDate, endDate})
         this.$emit('change', {startDate, endDate})
       }
     }