add .sync modifier, discard defaultDate and defaultRange, update readme

ParadeTo · Jul 16, 2017 · 1885dc2 · 1885dc2
1 parent c549a5c
commit 1885dc2
Show file tree

Hide file tree

Showing 7 changed files with 72 additions and 23 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -88,7 +88,7 @@ <h2>calendar</h2>
                   :days-disabled-end="daysDisabledEnd"
                   :disabled-func="disabledFunc"
                   :first-day-of-week="1"
-                  :default-date="date"
+                  :sync-date.sync="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"
-                :default-range="range"
+                :sync-range="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>
@@ -250,7 +250,7 @@ <h2>custom style</h2>
 </section>
 <script src="//cdn.bootcss.com/moment.js/2.17.1/moment.min.js"></script>
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
-<script src="../dist/vue-date-range.js"></script>
+<script src="../dist/vue-date-range.min.js"></script>
 <script>
     new Vue({
         el: '#calendar',
@@ -271,9 +271,15 @@ <h2>custom style</h2>
               return false
             },
             lang: 'en',
-            date: moment()
+            date: moment(),
+            defaultDate: moment().add(1, 'months')
           };
         },
+        created: function () {
+          setTimeout(() => {
+            this.date = moment().add(1, 'months')
+          }, 1000)
+        },
         methods: {
           onChange(date) {
             this.date = date;
@@ -320,6 +326,14 @@ <h2>custom style</h2>
             }
           };
         },
+        created: function () {
+            setTimeout(() => {
+              this.range = {
+                    startDate: moment().add(1, 'months'),
+                    endDate: moment().add(7, 'days').add(1, 'months')
+                }
+            }, 1000)
+        },
         methods: {
           onChange(range) {
             this.range = range;

diff --git a/dist/vue-date-range.min.js b/dist/vue-date-range.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-date-range",
-  "version": "2.1.1",
+  "version": "2.2.1",
   "description": "A vue component for choosing dates and date ranges. Uses Moment.js for date operations.",
   "main": "dist/vue-date-range.min.js",
   "scripts": {

diff --git a/readme.md b/readme.md
@@ -77,7 +77,7 @@ export default {
 ```
 
 ## browser
-Download vue-date-range.js from dist/ and import in your web page. Example:
+Download vue-date-range.min.js from dist/ and import in your web page. Example:
 
 ```
 ...
@@ -87,21 +87,21 @@ Download vue-date-range.js from dist/ and import in your web page. Example:
               :show-lunar="true"
               :first-day-of-week="1"
               :disable-days-before-today="disableDaysBeforeToday"
-              :default-date="date"
+              :sync-date="date"
               :lang="lang" @change="onChange"></calendar>
 </div>
 ...
 <div id="range" class="calendar-wrapper">
     <span>{{range.startDate.format('YYYY-MM-DD')}}</span>~<span>{{range.endDate.format('YYYY-MM-DD')}}</span>
-    <daterange class="calendar" :default-range="range" :lang="lang" @change="onChange"></daterange>
+    <daterange class="calendar" :sync-range="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>
 </div>
 ...
 
 <script src="//cdn.bootcss.com/moment.js/2.17.1/moment.min.js"></script>
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
-<script src="../dist/vue-date-range.js"></script>
+<script src="../dist/vue-date-range.min.js"></script>
 <script>
     new Vue({
         el: '#calendarLunar',
@@ -155,6 +155,13 @@ Download vue-date-range.js from dist/ and import in your web page. Example:
 </script>
 ```
 
+# .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>
+```
+
 # Props
 ## Calendar
 * show-lunar: Show lunar or not. Default is false.
@@ -204,15 +211,23 @@ Download vue-date-range.js from dist/ and import in your web page. Example:
 |sl-si|Slovenian|
 |uk|Ukrainian|
 
-* default-date: Init the selected date. Only for Calendar.
+* 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>
+  ```
+* ~~default-date: Init the selected date. Only for Calendar.~~(use syncDate instead)
 * range: The selected date range. e.g.: 
 
   ```javascript
   range: {startDate: moment(), endDate: moment().add(7, 'days')}
   ```
 
 ## DateRange
-This component is build on ``Calendar``, so it has all the props of ``Calendar`` except ``default-date``
+This component is build on ``Calendar``, so it has all the props of ``Calendar`` except ``sync-date``
 Also it has its specific props: 
 
-* defaultRange: Use to init the date range
+* 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>
+  ```
+* ~~defaultRange: Used to init the date range~~
diff --git a/src/Calendar.vue b/src/Calendar.vue
@@ -73,7 +73,11 @@
         type: String,
         default: 'zh'
       },
-      defaultDate: {
+      // use syncDate instead
+//      defaultDate: {
+//        type: Object
+//      },
+      syncDate: {
         type: Object
       }
     },
@@ -82,7 +86,7 @@
         weekDays: [],
         days: [],
         dayOfMonth: moment(), // Any day of current displaying month
-        date: this.defaultDate || moment()
+        date: this.syncDate || moment()
       }
     },
     watch: {
@@ -92,7 +96,7 @@
         this.resetDayOfMonth()
       },
       // show month that contains defaultDate
-      defaultDate (val) {
+      syncDate (val) {
         this.date = val
         this.resetDayOfMonth()
       }
@@ -212,6 +216,7 @@
       },
       handleDayClick (day) {
         this.date = day.dayMoment
+        this.$emit('update:syncDate', day.dayMoment)
         this.$emit('change', day.dayMoment)
       },
       changeMonth (delta) {

diff --git a/src/DateRange.vue b/src/DateRange.vue
@@ -52,13 +52,16 @@
         type: String,
         default: 'zh'
       },
-      defaultRange: {
+//      defaultRange: {
+//        type: Object
+//      }
+      syncRange: {
         type: Object
       }
     },
     data () {
       return {
-        rangeData: this.defaultRange || {
+        rangeData: this.syncRange || {
           startDate: null,
           endDate: null
         },
@@ -67,7 +70,7 @@
       }
     },
     watch: {
-      defaultRange (val) {
+      syncRange (val) {
         this.rangeData = val
         this.step = 0
       }
@@ -94,6 +97,7 @@
         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
+        this.$emit('update:syncRange', {startDate, endDate})
         this.$emit('change', {startDate, endDate})
       }
     }

diff --git a/test/unit/Calendar.spec.js b/test/unit/Calendar.spec.js
@@ -15,7 +15,7 @@ const month = moment().month()
 describe('Test Calendar:',  () => {
   commonUnit(Calendar)
 
-  it('days between range should have in-range class and when range is changed it should also be true', () => {
+  it('days between range should have in-range class and when range is changed it should also be true', (done) => {
     const start = moment(`${year}-${formatMonth(month+1)}-14`)
     const end = moment(`${year}-${formatMonth(month+1)}-16`)
 
@@ -42,10 +42,11 @@ describe('Test Calendar:',  () => {
     vm.$nextTick(() => {
       $spans = vm.$el.querySelectorAll(".days span .in-range")
       expect($spans.length).to.equal(2)
+      done()
     })
   })
 
-  it('the default date should has selected class and when it change Calender\'s month will change too', () => {
+  it('the syncDate should has selected class and when it change Calender\'s month will change too', (done) => {
     // next month
     let nextMonth = month + 1
     let nextYear = year
@@ -55,25 +56,27 @@ describe('Test Calendar:',  () => {
     }
     nextMonth = formatMonth(nextMonth + 1)
 
-    const defaultDate = moment(`${nextYear}-${nextMonth}-15`)
+    const syncDate = moment(`${nextYear}-${nextMonth}-15`)
 
     let vm = getRenderedVm(Calendar)
 
-    vm.defaultDate = defaultDate
+    vm.syncDate = syncDate
 
     vm.$nextTick(() => {
       const _month = vm.$el.querySelector(".month-year span span").innerText
       expect(_month).to.equal(nextMonth)
 
       const $spans = vm.$el.querySelectorAll(".days span")
-      const pos = getDayPositionInCalendar(defaultDate, 0)
+      const pos = getDayPositionInCalendar(syncDate, 0)
       for (var i = 0, len = $spans.length; i < len; i++) {
         if (i === pos-1) {
           var $solar = $spans[i].querySelector(".solar")
           var hasCls = $solar.className.indexOf('selected') > -1
           expect(hasCls).to.equal(true)
         }
       }
+
+      done()
     })
   })
 })