-
+
-
+
```
+# .sync
+For Vue2.3.0+, we can use [`.sync` modifier](https://vuejs.org/v2/guide/components.html#sync-Modifier):
+```javascript
+
+
+```
+
# Props
## Calendar
* show-lunar: Show lunar or not. Default is false.
@@ -204,7 +211,11 @@ 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
+
+ ```
+* ~~default-date: Init the selected date. Only for Calendar.~~(use syncDate instead)
* range: The selected date range. e.g.:
```javascript
@@ -212,7 +223,11 @@ Download vue-date-range.js from dist/ and import in your web page. Example:
```
## 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
+
+ ```
+* ~~defaultRange: Used to init the date range~~
diff --git a/src/Calendar.vue b/src/Calendar.vue
index 9ea2f43..93cd2c7 100644
--- 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
index f0fdc0d..e2f1dd3 100644
--- 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
index b9325c5..32616fd 100644
--- 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,18 +56,18 @@ 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")
@@ -74,6 +75,8 @@ describe('Test Calendar:', () => {
expect(hasCls).to.equal(true)
}
}
+
+ done()
})
})
})
\ No newline at end of file