vue-calendars

一个极简的日历控件。

使用

<day :month="now" :selected="selected" @click="select"></day>

import { Day } from 'vue-calendars'

export default {
  data: {
    const now = new Date()
    return {
      now,
      selected: { start: now, end: now }
    }
  },

  methods: {
    select (date) {
      this.selected = { start: date, end: date }
    }
  },

  components: { Day }
}

API

Props

Prop | 类型 | 描述 | 默认值/必需 --- | --- | --- | --- month(year) | Date | 日历展示的月份（在月日历中为年份） | 必需 filter | Function (Date => Boolean) | 过滤日历中可以选择的项 | () => true selected | Object({ start: Date, end: Date }) | 设置选中项 | pending | Array([ Date, Date ]) | 设置未决选中项 | []

Events

Event | 参数 | 描述 --- | --- | --- click | date | 点击日历中某一项时触发 enter | date | 鼠标移入日历中某一项时触发 leave | date | 鼠标移出日历中某一项时触发

⚠️注意：事件参数提交的 date 对象为开始的时间点，即：选中一天时结果为该天 00:00:00，选中一周时结果为该周周一 00:00:00，选中一月时结果为该月 1 日 00:00:00。

示例

参考 examples 文件夹。