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>

<style lang="less" scoped>
article {
  overflow: hidden;
}

.col {
  float: left;
  width: 340px;
  margin-right: 20px;
}

h4 {
  margin-top: 0;
}
</style>

<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>

<template>
<article>
  <veui-radio-group
    v-model="type"
    :items="types"
  />
  <veui-calendar :type="type"/>
</article>
</template>

<script>
import { Calendar, RadioGroup } from 'veui'

export default {
  components: {
    'veui-calendar': Calendar,
    'veui-radio-group': RadioGroup
  },
  data () {
    return {
      date: new Date(),
      type: 'date',
      types: [
        { label: 'date', value: 'date' },
        { label: 'month', value: 'month' },
        { label: 'year', value: 'year' }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.veui-radio-group {
  margin-bottom: 20px;
}
</style>

<template>
<article>
  <section>
    <veui-checkbox v-model="isFill">
      Fill month
    </veui-checkbox>
  </section>
  <veui-calendar :fill-month="isFill"/>
</article>
</template>

<script>
import { Calendar, Checkbox } from 'veui'

export default {
  components: {
    'veui-calendar': Calendar,
    'veui-checkbox': Checkbox
  },
  data () {
    return {
      date: new Date(),
      isFill: true
    }
  }
}
</script>

<style lang="less" scoped>
section {
  margin-bottom: 20px;
}
</style>

<template>
<article>
  <section>
    <h4>只允许选未来的日期</h4>
    <veui-calendar :disabled-date="disabledDate"/>
  </section>
</article>
</template>

<script>
import { Calendar } from 'veui'

export default {
  components: {
    'veui-calendar': Calendar
  },
  created () {
    this.now = new Date()
    this.now.setHours(0, 0, 0, 0)
  },
  methods: {
    disabledDate (date) {
      return this.now.getTime() > date.getTime()
    }
  }
}
</script>

<template>
<article>
  <section>
    <veui-calendar
      date-class="custom-date"
    />
  </section>
</article>
</template>

<script>
import { Calendar } from 'veui'

export default {
  components: {
    'veui-calendar': Calendar
  }
}
</script>

<style lang="less">
.custom-date {
  font-style: italic;
}
</style>