Calendar

<template>
<article>
  <veui-calendar v-model="date"/>
  <p>Selected: {{ readableDate }}</p>
</article>
</template>

<script>
import { Calendar } from 'veui'

export default {
  components: {
    'veui-calendar': Calendar
  },
  data () {
    return {
      date: new Date()
    }
  },
  computed: {
    readableDate () {
      return this.date.toLocaleDateString(this.$i18n.locale, {
        weekday: 'long',
        year: 'numeric',
        month: 'long',
        day: 'numeric'
      })
    }
  }
}
</script>

<template>
<article>
  <section class="col">
    <h4>Multiple dates</h4>
    <veui-calendar
      v-model="dates"
      multiple
    />
    <section>Selected: {{ readableDates }}</section>
  </section>
  <section class="col">
    <h4>Date ranges</h4>
    <veui-calendar
      v-model="range"
      range
    />
    <section>Selected: {{ readableRange }}</section>
  </section>
</article>
</template>

<script>
import { Calendar } from 'veui'

export default {
  components: {
    'veui-calendar': Calendar
  },
  data () {
    return {
      dates: null,
      range: null
    }
  },
  computed: {
    readableDates () {
      if (!this.dates || !this.dates.length) {
        return 'Nothing.'
      }
      return this.toReadable(this.dates).join(', ')
    },
    readableRange () {
      if (!this.range) {
        return 'Nothing.'
      }
      return this.toReadable(this.range).join(' to ')
    }
  },
  methods: {
    toReadable (dates) {
      return dates.map(date => date.toLocaleDateString(this.$i18n.locale))
    }
  }
}
</script>

<template>
<article>
  <veui-calendar
    v-model="ranges"
    range
    multiple
    :panel="2"
  />
  <section>Selected: {{ readableRanges }}</section>
</article>
</template>

<script>
import { Calendar } from 'veui'

export default {
  components: {
    'veui-calendar': Calendar
  },
  data () {
    return {
      ranges: null
    }
  },
  computed: {
    readableRanges () {
      if (!this.ranges || this.ranges.length === 0) {
        return 'Nothing.'
      }
      return this.ranges
        .map(range => this.toReadable(range).join(' to '))
        .join(', ')
    }
  },
  methods: {
    toReadable (dates) {
      return dates.map(date => date.toLocaleDateString(this.$i18n.locale))
    }
  }
}
</script>