Vuelendar是用Vue.js编写的简单干净的日历。

安装和下载：

# NPM
$ npm install vuelendar --save

使用：

在.vue文件中导入样式：

<style src="vuelendar/scss/vuelendar.scss" lang="scss"></style>

注册组件：

import VRangeSelector from 'vuelendar/components/vl-range-selector';
import VDaySelector from 'vuelendar/components/vl-day-selector';
export default {
  components: {
    VRangeSelector,
    VDaySelector
  },
  data () {
    return {
      range: {},
      date: null
    }
  }
  // ...
}

在模板中使用：

<v-range-selector
  :start-date.sync="range.start"
  :end-date.sync="range.end"
/>

<v-day-selector
  v-model="date"
/>

禁用日期：

Vuelendar提供了两种禁用日期的方法。
使用数组：

<v-day-selector
  v-model="date"
  disabled-dates="['2019-04-21', '2019-04-25']
/>
将于2019年4月21日和2019年4月25日停用

使用对象描述日期范围：

<v-day-selector
  v-model="date"
  disabled-dates="{
    from: '2019-04-21',
    to: '2019-04-23'
  }"
/>
将禁用2019年4月21日至2019年4月25日的所有日期

仅指定“来自”属性将禁用该日期之后的所有日期。

<v-day-selector
  v-model="date"
  disabled-dates="{
    from: '2019-04-21',
  }"
/>
将从2019年4月21日起禁用所有日期

仅指定“到”属性将禁用该日期之前的所有日期。

<v-day-selector
  v-model="date"
  disabled-dates="{
    to: '2019-04-21',
  }"
/>
将在2019年4月21日前禁用所有日期