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"
    class="group"
    :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>
.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
      class="demo-date-class"
      :date-class="dayClass"
    />
  </section>
</article>
</template>

<script>
import { Calendar } from 'veui'

export default {
  components: {
    'veui-calendar': Calendar
  },
  methods: {
    dayClass (date) {
      return [0, 6].includes(date.getDay()) ? 'weekend' : undefined
    }
  }
}
</script>

<style lang="less" scoped>
.demo-date-class {
  ::v-deep .weekend button {
    color: rebeccapurple;
  }
}
</style>

<template>
<article>
  <veui-calendar
    v-model="date"
    class="default"
  >
    <template #before>
      <veui-stack
        class="before"
        gap="xxs"
        justify="center"
      >
        <veui-button
          ui="s ghost"
          @click="pickDay(-1)"
        >
          Yesterday
        </veui-button>
        <veui-button
          ui="s ghost"
          @click="pickDay(0)"
        >
          Today
        </veui-button>
        <veui-button
          ui="s ghost"
          @click="pickDay(1)"
        >
          Tomorrow
        </veui-button>
      </veui-stack>
    </template>
    <template #date="d">
      <u v-if="d.date === 1">{{ d.date }}</u>
      <template v-else>
        {{ d.date }}
      </template>
    </template>
  </veui-calendar>
</article>
</template>

<script>
import { Calendar, Button, Stack } from 'veui'

export default {
  components: {
    'veui-calendar': Calendar,
    'veui-button': Button,
    'veui-stack': Stack
  },
  data () {
    return {
      date: new Date()
    }
  },
  methods: {
    pickDay (d) {
      let date = new Date()
      date.setDate(date.getDate() + d)
      this.date = date
    }
  }
}
</script>

<style scoped>
.before {
  padding: 8px;
  border-bottom: 1px solid #e2e6f0;
}
</style>