vue.js日历_用Vue.js编写的简洁日历

vue.js日历

维伦达尔 (Vuelendar)

Simple and clean calendar written in Vue.js.

用Vue.js编写的简洁日历。

View demo 查看演示 Download Source 下载源

特征 (Features)

选择单个日期 (Select single date)

选择日期范围 (Select range of dates)

安装 (Installation)

npm install[email protected]

用法 (Usage)

Import styles in your .vue file:

在.vue文件中导入样式：

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

Register components:

注册组件：

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
    }
  }
  // ...
}

Use in template:

在模板中使用：

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

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

Use in template:

在模板中使用：

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

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

禁用日期 (Disabling dates)

Vuelendar allows two ways for disabling dates.

Vuelendar提供了两种禁用日期的方法。

Using an array:

使用数组：

<v-day-selector
  v-model="date"
  disabled-dates="['2019-04-21', '2019-04-25']
/>
Will disable 21st April 2019 and 25th April 2019

Using an object to describe a range of dates:

使用对象描述日期范围：

<v-day-selector
  v-model="date"
  disabled-dates="{
    from: '2019-04-21',
    to: '2019-04-23'
  }"
/>
Will disable all dates from 21st April 2019 and 25th April 2019

Specifying only 'from' attribute will disable all dates past that date.

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

<v-day-selector
  v-model="date"
  disabled-dates="{
    from: '2019-04-21',
  }"
/>
Will disable all dates from 21st April 2019

Specifying only 'to' attribute will disable all dates before that date.

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

<v-day-selector
  v-model="date"
  disabled-dates="{
    to: '2019-04-21',
  }"
/>
Will disable all dates before 21st April 2019

翻译自: https://vuejsexamples.com/simple-and-clean-calendar-written-in-vue-js/

vue.js日历