feat(datepicker): Emit a changed event

Author: mst101

docs/guide/Events/README.md

@@ -2,15 +2,16 @@
 
 These events are emitted on actions in the datepicker
 
-| Event                                           | Output     | Description                           |
-|-------------------------------------------------| ---------- | ------------------------------------- |
-| changed-month                                   | Object     | Month page has been changed           |
-| changed-year                                    | Object     | Year page has been changed            |
-| changed-decade                                  | Object     | Decade page has been changed          |
-| cleared                                         |            | Selected date has been cleared        |
-| closed                                          |            | The picker has been closed            |
-| input                                           | Date\|null | A date has been selected              |
-| opened                                          |            | The picker has been opened            |
-| selected <br/>*(deprecated in favour of input)* | Date\|null | A date has been selected |
-| blur                                            |            | Input blur event                      |
-| focus                                           |            | Input focus event                     |
+| Event                                           | Output      | Description                       |
+| ----------------------------------------------- | ----------- | --------------------------------- |
+| changed                                         | Date\|null | The selected date has been changed |
+| changed-month                                   | Object      | Month page has been changed       |
+| changed-year                                    | Object      | Year page has been changed        |
+| changed-decade                                  | Object      | Decade page has been changed      |
+| cleared                                         |             | Selected date has been cleared    |
+| closed                                          |             | The picker has been closed        |
+| input                                           | Date\|null | A date has been selected           |
+| opened                                          |             | The picker has been opened        |
+| selected <br/>_(deprecated in favour of input)_ | Date\|null | A date has been selected           |
+| blur                                            |             | Input blur event                  |
+| focus                                           |             | Input focus event                 |

src/components/Datepicker.vue

@@ -462,6 +462,17 @@ export default {
         this.closeByClickOutside()
       }
     },
+    dateChanged(date) {
+      if (!this.selectedDate && !date) {
+        return false
+      }
+
+      if (this.selectedDate && date) {
+        return date.valueOf() !== this.selectedDate.valueOf()
+      }
+
+      return true
+    },
     /**
      * Closes the calendar when no element within it has focus
      */
@@ -686,6 +697,10 @@ export default {
      * @param {Date|null} date
      */
     selectDate(date) {
+      if (this.dateChanged(date)) {
+        this.$emit('changed', date)
+      }
+
       this.setValue(date)
       this.$emit('input', date)
       this.$emit('selected', date)
@@ -708,19 +723,8 @@ export default {
     selectTypedDateOnLosingFocus() {
       const parsedDate = this.$refs.dateInput.parseInput()
       const date = this.utils.isValidDate(parsedDate) ? parsedDate : null
-      const hasChanged = () => {
-        if (!this.selectedDate && !date) {
-          return false
-        }
-
-        if (this.selectedDate && date) {
-          return date.valueOf() !== this.selectedDate.valueOf()
-        }
-
-        return true
-      }
 
-      if (hasChanged()) {
+      if (this.dateChanged(date)) {
         this.selectDate(date)
       }
     },

test/unit/specs/Datepicker/Datepicker.spec.js

@@ -354,6 +354,25 @@ describe('Datepicker mounted', () => {
     expect(wrapper.emitted('focus')).toBeTruthy()
   })
 
+  it('emits changed', async () => {
+    await wrapper.vm.open()
+
+    const dayCell = wrapper.findAll('button').at(10)
+
+    await dayCell.trigger('click')
+    expect(wrapper.emitted('changed')).toHaveLength(1)
+
+    await wrapper.vm.open()
+    await dayCell.trigger('click')
+    expect(wrapper.emitted('changed')).toHaveLength(1)
+
+    await wrapper.vm.open()
+
+    const differentDayCell = wrapper.findAll('button').at(11)
+    await differentDayCell.trigger('click')
+    expect(wrapper.emitted('changed')).toHaveLength(2)
+  })
+
   it('toggles when the input field is clicked', async () => {
     const input = wrapper.find('input')