插件名称 | vue-material-year-calendar |
---|---|
发布时间 | 2021年3月25日 |
插件作者 | nono1526 |
适用于Vue.js应用程序的易于使用的Material Design风格月度日历组件。
# NPM
$ npm i vue-material-year-calendar
1.导入日历组件。
import YearCalendar from ‘vue-material-year-calendar’
2.将<YearCalendar />组件添加到模板。
<template>
<YearCalendar
v-model="year"
:activeDates.sync="activeDates"
@toggleDate="toggleDate"
prefixClass="your_customized_wrapper_class"
:activeClass="activeClass"
></YearCalendar>
</template>
3.注册组件并设置激活日期,如下所示:
export default {
components: { YearCalendar },
data () {
return {
year: 2021,
activeDates: [
{ date: '2021-02-13' },
{ date: '2021-02-14', className: 'red' },
{ date: '2021-02-15', className: 'blue' },
{ date: '2021-02-16', className: 'your_customized_classname' }
],
activeClass: '',
}
},
methods: {
toggleDate (dateInfo) {
console.log(dateInfo)
}
}
}
4.可用的组件道具。
showYearSelector: {
type: Boolean,
default: () => true
},
activeDates: {
type: Array,
default: () => [],
validator: (dateArray) => {
let isGood = true
let curDate = null
dateArray.forEach(date => {
if (typeof date === 'string') {
curDate = date
} else if (typeof date === 'object' && date.hasOwnProperty('date')) {
curDate = date.date
}
if (!/^\d{4}\-\d{1,2}\-\d{1,2}$/.test(curDate)) {
isGood = false
}
// Parse the date parts to integers
var parts = curDate.split('-')
var day = parseInt(parts[2], 10)
var month = parseInt(parts[1], 10)
var year = parseInt(parts[0], 10)
if (year < 1000 || year > 3000 || month === 0 || month > 12) isGood = false
let monthLength = [ 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 ]
if (year % 400 === 0 || (year % 100 !== 0 && year % 4 === 0)) monthLength[1] = 29
if (!(day > 0 && day <= monthLength[month - 1])) isGood = false
})
return isGood
}
},
// v-model="year"
value: {
type: [String, Number],
default: dayjs().year()
},
lang: {
type: String,
default: 'en'
},
activeClass: {
type: String,
default: () => ''
},
prefixClass: {
type: String,
default: () => 'calendar--active'
},
hideWeekend: {
type: Boolean,
default: false
},
hideSunday: {
type: Boolean,
default: false
}
04/27/2021