- apply date changes if user clicks apply or clicks outside of

the datepicker
- notify parent component when datepicker closes

dev/App.vue

@@ -20,10 +20,9 @@
  :end-date="'2018-05-10'"
  :months-to-show="2"
  :start-open="false"
- :require-apply="true"
  @date-one-selected="val => { inputDateOne = val }"
  @date-two-selected="val => { inputDateTwo = val }"
- @dates-applied="datesApplied"
+ @closed="onClosed"
  />
  </div>
  </div>
@@ -99,9 +98,9 @@ export default {
  }
  return formattedDates
  },
- datesApplied(dateOne, dateTwo) {
- var datesStr = this.formatDates(dateOne, dateTwo)
- window.alert('Dates Selected: ' + datesStr)
+ onClosed() {
+ var datesStr = this.formatDates(this.inputDateOne, this.inputDateTwo)
+ console.log('Dates Selected: ' + datesStr)
  }
  }
 }

src/components/AirbnbStyleDatepicker.vue

@@ -6,7 +6,7 @@
  v-show="showDatepicker"
  :class="wrapperClasses"
  :style="showFullscreen ? undefined : wrapperStyles"
- v-click-outside="closeDatepickerCancel"
+ v-click-outside="closeDatepicker"
  >
  <div class="mobile-header mobile-only" v-if="showFullscreen">
  <div class="mobile-close" @click="closeDatepicker">
@@ -84,7 +84,7 @@
  </div>
  <div class="action-buttons" v-if="mode !== 'single'">
  <button @click="closeDatepickerCancel">{{ texts.cancel }}</button>
- <button @click="closeDatepickerApply" :style="{color: colors.selected}">{{ texts.apply }}</button>
+ <button @click="closeDatepicker" :style="{color: colors.selected}">{{ texts.apply }}</button>
  </div>
  </div>
  </transition>
@@ -113,7 +113,6 @@ export default {
  offsetX: { type: Number, default: 0 },
  monthsToShow: { type: Number, default: 2 },
  startOpen: { type: Boolean },
- requireApply: { type: Boolean, default: false },
  fullscreenMobile: { type: Boolean },
  inline: { type: Boolean },
  mobileHeader: { type: String, default: 'Select date' }
@@ -469,21 +468,18 @@ export default {
  },
  closeDatepickerCancel() {
  if (this.showDatepicker) {
- if (this.requireApply) {
- this.selectedDate1 = this.initialDate1
- this.selectedDate2 = this.initialDate2
- }
+ this.selectedDate1 = this.initialDate1
+ this.selectedDate2 = this.initialDate2
  this.closeDatepicker()
  }
  },
- closeDatepickerApply() {
- this.closeDatepicker()
- this.$emit('dates-applied', this.selectedDate1, this.selectedDate2)
- },
  closeDatepicker() {
  if (this.inline) {
  return
  }
+ if (this.showDatepicker) {
+ this.$nextTick(() => this.$emit('closed'))
+ }
  this.showDatepicker = false
  },
  positionDatepicker() {