Calendar 日历

示例

单日选择

默认情况下，单击日期可以选中一个日期。

一	二	三	四	五	六	日

Selected: 2019 M06 20, Thu

支持 v-model，数据类型为原生 Date 类型。

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

多日选择、日期范围选择

配置 multiple 属性时，可以选择多个日期。配置 range 属性时，可以选择一个日期范围。

Multiple dates

一	二	三	四	五	六	日

Selected: Nothing.

Date ranges

一	二	三	四	五	六	日

Selected: Nothing.

支持 v-model，选择多个单日时数据类型为 Array<Date>，选择日期范围时数据类型为 [Date, Date]。

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

多日期范围选择

同时配置 multiple 及 range 属性时，可以选择多段日期范围。配置 panel 属性时，可以指定日历面板的数量。两次选择的时间段合并的策略为，若从未选日期开始选择则选中该时段，否则则取消选择该时段。

一	二	三	四	五	六	日

一	二	三	四	五	六	日

Selected: Nothing.

支持 v-model，选择多日期范围时数据类型为 Array<[Date, Date]>。

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

API

属性

名称类型默认值描述

type string 'date' 日历的类型，可用值为 'date'/'month'/'year'，分别对应日期/月/年视图。值非 'date' 时，multiple 与 range 属性无效。

multiple boolean false 是否可以选择多个日期（范围）。

range boolean false 是否选择日期范围。

selected

Date|Array

v-model

已选日期（范围）的值，根据 multiple 和 range 属性值的不同，数据格式不同。

`multiple`	`range`	类型
`false`	`false`	`Date`
`true`	`false`	`Array<Date>`
`false`	`true`	`[Date, Date]`
`true`	`true`	`Array<[Date, Date]>`

panel number 1 日历面板数量。

today Date new Date() 「今天」的日期。

week-start number calendar.weekStart 一周的起始。可进行全局配置。

fill-month boolean true 当只有一个面板时，是否要在当前月份面板显示非本月日期。

date-class string|Array|Object|function {} 特定日期的自定义 HTML class。传非函数时，数据格式为所有 Vue 支持的 class 表达式；传函数时，签名为 function(Date): string|Array<string>|Object<string, boolean>，返回值格式亦为所有 Vue 支持的 class 表达式。

disabled-date function(Date): boolean () => false 特定日期是否禁用。

disabled boolean false 是否为禁用状态。

readonly boolean false 是否为只读状态。

插槽

名称描述

before 日历内，面板上方可供定制的区域。

after 日历内，面板下方可供定制的区域。

date

单日单元格内的区域，可用来定制每一天对应区域的内容。

默认内容：对应日期的 date。

名称	类型	描述
`year`	`number`	完整年份。
`month`	`number`	月份数，`0` 表示一月。
`date`	`number`	月份内的日期。

事件

名称描述

select

v-model

选择修改后触发，回调参数为 (selected)。数据类型和 selected 属性一致。

selectstart 选择日期范围时，选择完起始日期时触发，回调参数 (picking: Date)，表示已选的起始项日期。

selectprogress

选择日期范围时，在已经选择开始日期后，通过鼠标或键盘交互标记到的结束日期变更时触发。回调参数为 (picking)，表示当前标记的日期范围，类型取决于 multiple 属性的值。

`multiple`	类型
`false`	`[Date, Date]`
`true`	`Array<[Date, Date]>`

viewchange 面板显示的月份发生变化时触发。回调参数 (month: Object<{year: number, month: number}>)，表示当前年月（month 为 0 表示一月）。

全局配置

名称	类型	默认值	描述
`calendar.weekStart`	`number`	`1`	一周的第一天是星期几。周一到周日分别对应 `1` 到 `7`。

图标

名称	描述
`prev`	上一页。
`next`	下一页。
`expand`	展开下拉菜单。