<template>
  <div :class="[$style.dateRange,'date-range']">
    <InputDate v-model="date.start" />
    <span :class="$style.text">~</span>
    <InputDate v-model="date.end" />
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: Object,
      required: false,
      default () {
        return {
          start: '',
          end: ''
        }
      }
    }
  },
  computed: {
    date: {
      get () { return this.value },
      set (date) { this.$emit('input', date) }
    }
  },
  watch: {
    date: {
      handler (newVal) {
        this.$emit('input', newVal)
      },
      deep: true
    }
  }
}
</script>

<style module lang="scss">

.dateRange {
  font-size: 1.4rem;
  /* margin: 0 0 2rem 1rem; */
  display:flex;
  align-items:center
}

.text{
  margin:0 1rem;
}

/* @include mq-pc {
}
@include mq-sp {

} */

</style>
