Merge pull request #1 from pdvluca/master

Allow to propagate date changes only if "Apply" button has been pressed

dev/App.vue

@@ -22,6 +22,7 @@
  :start-open="false"
  @date-one-selected="val => { inputDateOne = val }"
  @date-two-selected="val => { inputDateTwo = val }"
+ @closed="onClosed"
  />
  </div>
  </div>
@@ -96,6 +97,10 @@ export default {
  formattedDates += ' - ' + format(dateTwo, this.dateFormat)
  }
  return formattedDates
+ },
+ onClosed() {
+ var datesStr = this.formatDates(this.inputDateOne, this.inputDateTwo)
+ console.log('Dates Selected: ' + datesStr)
  }
  }
 }

src/components/AirbnbStyleDatepicker.vue

@@ -84,7 +84,7 @@
  </transition-group>
  </div>
  <div class="action-buttons" v-if="mode !== 'single'">
- <button @click="closeDatepicker">{{ texts.cancel }}</button>
+ <button @click="closeDatepickerCancel">{{ texts.cancel }}</button>
  <button @click="closeDatepicker" :style="{color: colors.selected}">{{ texts.apply }}</button>
  </div>
  </div>
@@ -464,11 +464,23 @@ export default {
  this.positionDatepicker()
  this.setStartDates()
  this.showDatepicker = true
+ this.initialDate1 = this.dateOne
+ this.initialDate2 = this.dateTwo
+ },
+ closeDatepickerCancel() {
+ if (this.showDatepicker) {
+ this.selectedDate1 = this.initialDate1
+ this.selectedDate2 = this.initialDate2
+ this.closeDatepicker()
+ }
  },
  closeDatepicker() {
  if (this.inline) {
  return
  }
+ if (this.showDatepicker) {
+ this.$nextTick(() => this.$emit('closed'))
+ }
  this.showDatepicker = false
  },
  positionDatepicker() {