diff --git a/README.md b/README.md
index afd6e5cc..8db07ccf 100644
--- a/README.md
+++ b/README.md
@@ -153,17 +153,19 @@ Inline always open version
These events are emitted on actions in the datepicker
-| Event | Output | Description |
-|-------------------|------------|--------------------------------------|
-| opened | | The picker is opened |
-| closed | | The picker is closed |
-| selected | Date\|null | A date has been selected |
-| selectedDisabled | Object | A disabled date has been selected |
-| input | Date\|null | Input value has been modified |
-| cleared | | Selected date has been cleared |
-| changedMonth | Object | Month page has been changed |
-| changedYear | Object | Year page has been changed |
-| changedDecade | Object | Decade page has been changed |
+| Event | Output | Description |
+|--------------------|------------|--------------------------------------|
+| opened | | The picker is opened |
+| closed | | The picker is closed |
+| selected | Date\|null | A date has been selected |
+| selected-disabled | Object | A disabled date has been selected |
+| input | Date\|null | Input value has been modified |
+| cleared | | Selected date has been cleared |
+| changed-month | Object | Month page has been changed |
+| changed-year | Object | Year page has been changed |
+| changed-decade | Object | Decade page has been changed |
+
+NB. The old camel case event names may be deprecated as they do not adhere to [Vue's guidelines](https://vuejs.org/v2/guide/components-custom-events.html#Event-Names).
## Date formatting
diff --git a/src/components/Datepicker.vue b/src/components/Datepicker.vue
index 67055bef..05483822 100644
--- a/src/components/Datepicker.vue
+++ b/src/components/Datepicker.vue
@@ -48,10 +48,10 @@
:mondayFirst="mondayFirst"
:dayCellContent="dayCellContent"
:use-utc="useUtc"
- @changedMonth="handleChangedMonthFromDayPicker"
+ @changed-month="handleChangedMonthFromDayPicker"
@selectDate="selectDate"
@showMonthCalendar="showMonthCalendar"
- @selectedDisabled="selectDisabledDate">
+ @selected-disabled="selectDisabledDate">
@@ -70,7 +70,7 @@
:use-utc="useUtc"
@selectMonth="selectMonth"
@showYearCalendar="showYearCalendar"
- @changedYear="setPageDate">
+ @changed-year="setPageDate">
@@ -88,7 +88,7 @@
:isRtl="isRtl"
:use-utc="useUtc"
@selectYear="selectYear"
- @changedDecade="setPageDate">
+ @changed-decade="setPageDate">
@@ -357,6 +357,7 @@ export default {
* @param {Object} date
*/
selectDisabledDate (date) {
+ this.$emit('selected-disabled', date)
this.$emit('selectedDisabled', date)
},
/**
@@ -366,6 +367,7 @@ export default {
const date = new Date(month.timestamp)
if (this.allowedToShowView('day')) {
this.setPageDate(date)
+ this.$emit('changed-month', month)
this.$emit('changedMonth', month)
this.showDayCalendar()
} else {
@@ -379,6 +381,7 @@ export default {
const date = new Date(year.timestamp)
if (this.allowedToShowView('month')) {
this.setPageDate(date)
+ this.$emit('changed-year', year)
this.$emit('changedYear', year)
this.showMonthCalendar()
} else {
@@ -420,6 +423,7 @@ export default {
*/
handleChangedMonthFromDayPicker (date) {
this.setPageDate(date)
+ this.$emit('changed-month', date)
this.$emit('changedMonth', date)
},
/**
diff --git a/src/components/PickerDay.vue b/src/components/PickerDay.vue
index 819d0633..9334e655 100644
--- a/src/components/PickerDay.vue
+++ b/src/components/PickerDay.vue
@@ -157,6 +157,7 @@ export default {
methods: {
selectDate (date) {
if (date.isDisabled) {
+ this.$emit('selected-disabled', date)
this.$emit('selectedDisabled', date)
return false
}
@@ -181,6 +182,7 @@ export default {
changeMonth (incrementBy) {
let date = this.pageDate
this.utils.setMonth(date, this.utils.getMonth(date) + incrementBy)
+ this.$emit('changed-month', date)
this.$emit('changedMonth', date)
},
/**
diff --git a/src/components/PickerMonth.vue b/src/components/PickerMonth.vue
index a1bd64d4..18fe6c04 100644
--- a/src/components/PickerMonth.vue
+++ b/src/components/PickerMonth.vue
@@ -105,6 +105,7 @@ export default {
changeYear (incrementBy) {
let date = this.pageDate
this.utils.setFullYear(date, this.utils.getFullYear(date) + incrementBy)
+ this.$emit('changed-year', date)
this.$emit('changedYear', date)
},
/**
diff --git a/src/components/PickerYear.vue b/src/components/PickerYear.vue
index 2060106e..ac6e1345 100644
--- a/src/components/PickerYear.vue
+++ b/src/components/PickerYear.vue
@@ -100,6 +100,7 @@ export default {
changeYear (incrementBy) {
let date = this.pageDate
this.utils.setFullYear(date, this.utils.getFullYear(date) + incrementBy)
+ this.$emit('changed-decade', date)
this.$emit('changedDecade', date)
},
previousDecade () {
diff --git a/test/unit/specs/Datepicker/Datepicker.spec.js b/test/unit/specs/Datepicker/Datepicker.spec.js
index df080e7e..ae4046ec 100644
--- a/test/unit/specs/Datepicker/Datepicker.spec.js
+++ b/test/unit/specs/Datepicker/Datepicker.spec.js
@@ -99,10 +99,10 @@ describe('Datepicker mounted', () => {
expect(wrapper.vm.isOpen).toEqual(false)
})
- it('should emit selectedDisabled on a disabled timestamp', () => {
+ it('should emit selected-disabled on a disabled timestamp', () => {
const date = new Date(2016, 9, 1)
wrapper.vm.selectDisabledDate({timestamp: date.getTime()})
- expect(wrapper.emitted().selectedDisabled).toBeTruthy()
+ expect(wrapper.emitted('selected-disabled')).toBeTruthy()
})
it('can select a day', () => {
@@ -117,8 +117,8 @@ describe('Datepicker mounted', () => {
it('can select a month', () => {
const date = new Date(2016, 9, 9)
wrapper.vm.selectMonth({timestamp: date.getTime()})
- expect(wrapper.emitted().changedMonth).toBeTruthy()
- expect(wrapper.emitted().changedMonth[0][0].timestamp).toEqual(date.getTime())
+ expect(wrapper.emitted('changed-month')).toBeTruthy()
+ expect(wrapper.emitted('changed-month')[0][0].timestamp).toEqual(date.getTime())
expect(new Date(wrapper.vm.pageTimestamp).getMonth()).toEqual(date.getMonth())
expect(wrapper.vm.showDayView).toEqual(true)
})
@@ -126,8 +126,8 @@ describe('Datepicker mounted', () => {
it('can select a year', () => {
const date = new Date(2018, 9, 9)
wrapper.vm.selectYear({timestamp: date.getTime()})
- expect(wrapper.emitted().changedYear).toBeTruthy()
- expect(wrapper.emitted().changedYear[0][0].timestamp).toEqual(date.getTime())
+ expect(wrapper.emitted('changed-year')).toBeTruthy()
+ expect(wrapper.emitted('changed-year')[0][0].timestamp).toEqual(date.getTime())
expect(new Date(wrapper.vm.pageTimestamp).getFullYear()).toEqual(date.getFullYear())
expect(wrapper.vm.showMonthView).toEqual(true)
})
@@ -207,10 +207,10 @@ describe('Datepicker mounted', () => {
})
})
- it('should emit changedMonth on a month change received from PickerDay', () => {
+ it('should emit changed-month on a month change received from PickerDay', () => {
const date = new Date(2016, 9, 1)
wrapper.vm.handleChangedMonthFromDayPicker({timestamp: date.getTime()})
- expect(wrapper.emitted().changedMonth).toBeTruthy()
+ expect(wrapper.emitted('changed-month')).toBeTruthy()
})
})
diff --git a/test/unit/specs/PickerDay/changeMonths.spec.js b/test/unit/specs/PickerDay/changeMonths.spec.js
index 57170dc4..4bcbeb68 100644
--- a/test/unit/specs/PickerDay/changeMonths.spec.js
+++ b/test/unit/specs/PickerDay/changeMonths.spec.js
@@ -17,13 +17,13 @@ describe('PickerDay: changing months', () => {
it('can set the next month', () => {
wrapper.vm.nextMonth()
- expect(wrapper.emitted().changedMonth).toBeTruthy()
- expect(wrapper.emitted().changedMonth[0][0].getMonth()).toEqual(2)
+ expect(wrapper.emitted('changed-month')).toBeTruthy()
+ expect(wrapper.emitted('changed-month')[0][0].getMonth()).toEqual(2)
})
it('can set the previous month', () => {
wrapper.vm.previousMonth()
- expect(wrapper.emitted().changedMonth).toBeTruthy()
- expect(wrapper.emitted().changedMonth[0][0].getMonth()).toEqual(0)
+ expect(wrapper.emitted('changed-month')).toBeTruthy()
+ expect(wrapper.emitted('changed-month')[0][0].getMonth()).toEqual(0)
})
})
diff --git a/test/unit/specs/PickerDay/disabledDates.spec.js b/test/unit/specs/PickerDay/disabledDates.spec.js
index 8ed6b3e7..e58dae72 100644
--- a/test/unit/specs/PickerDay/disabledDates.spec.js
+++ b/test/unit/specs/PickerDay/disabledDates.spec.js
@@ -107,8 +107,8 @@ describe('PickerDay: disabled', () => {
expect(wrapper.vm.isDisabledDate(new Date(2016, 9, 11))).toEqual(false)
})
- it('should emit a selectedDisabled event for a disabled date', () => {
+ it('should emit a selected-disabled event for a disabled date', () => {
expect(wrapper.vm.selectDate({isDisabled: true})).toEqual(false)
- expect(wrapper.emitted().selectedDisabled).toBeTruthy()
+ expect(wrapper.emitted('selected-disabled')).toBeTruthy()
})
})
diff --git a/test/unit/specs/PickerMonth/pickerMonth.spec.js b/test/unit/specs/PickerMonth/pickerMonth.spec.js
index 985bc428..bc3c7995 100644
--- a/test/unit/specs/PickerMonth/pickerMonth.spec.js
+++ b/test/unit/specs/PickerMonth/pickerMonth.spec.js
@@ -26,12 +26,12 @@ describe('PickerMonth', () => {
it('can set the next year', () => {
wrapper.vm.nextYear()
- expect(wrapper.emitted().changedYear[0][0].getFullYear()).toEqual(2019)
+ expect(wrapper.emitted('changed-year')[0][0].getFullYear()).toEqual(2019)
})
it('can set the previous year', () => {
wrapper.vm.previousYear()
- expect(wrapper.emitted().changedYear[0][0].getFullYear()).toEqual(2017)
+ expect(wrapper.emitted('changed-year')[0][0].getFullYear()).toEqual(2017)
})
it('emits date on selection', () => {
diff --git a/test/unit/specs/PickerYear/pickerYear.spec.js b/test/unit/specs/PickerYear/pickerYear.spec.js
index a3c05d8d..a9d0f0da 100644
--- a/test/unit/specs/PickerYear/pickerYear.spec.js
+++ b/test/unit/specs/PickerYear/pickerYear.spec.js
@@ -26,12 +26,12 @@ describe('PickerYear', () => {
it('can set the next decade', () => {
wrapper.vm.nextDecade()
- expect(wrapper.emitted().changedDecade).toBeTruthy()
+ expect(wrapper.emitted('changed-decade')).toBeTruthy()
})
it('can set the previous decade', () => {
wrapper.vm.previousDecade()
- expect(wrapper.emitted().changedDecade).toBeTruthy()
+ expect(wrapper.emitted('changed-decade')).toBeTruthy()
})
it('formats the decade range', () => {