cannot clear value date-two

[nandafirmans]

Hi,

could I programmatically clear date-two value, I've been try set date-two to empty string manually but its seems not working. if I try to look at dev tools, it seems selectedDate2 not immediately updated

[MikaelEdebro]

You should just need to set the prop. Some example code:

<template>
        <div class="datepicker-trigger">
          <input
            type="text"
            id="datepicker-input-trigger"
            :value="inputDateOne + ' - ' + inputDateTwo"
            placeholder="Select dates"
          >

          <airbnb-style-datepicker
            :trigger-element-id="'datepicker-input-trigger'"
            :date-one="inputDateOne"
            :date-two="inputDateTwo"
            @date-one-selected="val => { inputDateOne = val }"
            @date-two-selected="val => { inputDateTwo = val }"
          />
        </div>
</template>

<script>
export default {
  data() {
    return {
      inputDateOne: '2018-12-20',
      inputDateTwo: '2018-12-24',
    }
  },
  created() {
    setTimeout(() => {
      this.inputDateTwo = ''
    }, 5000)
  }
}
</script>

[nandafirmans]

in my case I'm using props to binding date-two value, I try to emit empty string to set date-two value but its not updated.

my solution I adding watcher as below

sorry for bad english..

[natalya-semenova]

The issue can be reproduced when you set the 'date-one' to empty string within 'date-one-selected' handler. The datePropsCompound property watcher's handler does not take into account dateTwo

... datePropsCompound(newValue) { if (this.dateOne !== this.selectedDate1) { ...

Here is the link to the fiddle to reproduce https://jsfiddle.net/grhv6o3f/3/