}
},
// 是否显示农历
lunar: {
type: Boolean,
default: false
},
// 自定义星期名称
weeks: {
type: Array,
default:function(){
return window.navigator.language.toLowerCase() == "zh-cn"?['日', '一', '二', '三', '四', '五', '六']:['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
}
},
// 自定义月份
months:{
type: Array,
default:function(){
return window.navigator.language.toLowerCase() == "zh-cn"?['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']:['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
}
},
// 自定义事件
events: {
type: Object,
default: function(){
return {}
}
},
},
data() {
return {
years:[],
yearsShow:false,
year: 0,
month: 0,
day: 0,
days: [],
multiDays:[],
today: [],
festival:{
lunar:{
"1-1":"春节",
"1-15":"元宵节",
"2-2":"龙头节",
"5-5":"端午节",
"7-7":"七夕节",
"7-15":"中元节",
"8-15":"中秋节",
"9-9":"重阳节",
"10-1":"寒衣节",
"10-15":"下元节",
"12-8":"腊八节",
"12-23":"祭灶节",
},
gregorian:{
"1-1":"元旦",
"2-14":"情人节",
"3-8":"妇女节",
"3-12":"植树节",
"4-5":"清明节",
"5-1":"劳动节",
"5-4":"青年节",
"6-1":"儿童节",
"7-1":"建党节",
"8-1":"建军节",
"9-10":"教师节",
"10-1":"国庆节",
"12-24":"平安夜",
"12-25":"圣诞节",
},
},
rangeBegin:[],
rangeEnd:[],
}
},
watch:{
events(){
this.render(this.year,this.month)
},
value(){
this.init();
}
},
mounted() {
this.init()
},
methods: {
init(){
if (this.month === 0) {
let now = new Date();
this.year = now.getFullYear()
this.month = now.getMonth()
this.day = now.getDate()
} else {
if (this.value.length>0) {
if (this.range) { //范围
this.year = parseInt(this.value[0][0])
this.month = parseInt(this.value[0][1]) - 1
this.day = parseInt(this.value[0][2])
let year2 = parseInt(this.value[1][0])
let month2 = parseInt(this.value[1][1]) - 1
let day2 = parseInt(this.value[1][2])
this.rangeBegin = [this.year, this.month,this.day]
this.rangeEnd = [year2, month2 , day2]
}else if(this.multi){//多选
this.multiDays=this.value;
this.year = parseInt(this.value[0][0])
this.month = parseInt(this.value[0][1]) - 1
this.day = parseInt(this.value[0][2])
}else{ //单选
this.year = parseInt(this.value[0])
this.month = parseInt(this.value[1]) - 1
this.day = parseInt(this.value[2])
}
}
}
this.render(this.year, this.month)
},
// 渲染日期
render(y, m) {
let firstDayOfMonth = new Date(y, m, 1).getDay() //当月第一天
let lastDateOfMonth = new Date(y, m + 1, 0).getDate() //当月最后一天
let lastDayOfLastMonth = new Date(y, m, 0).getDate() //最后一月的最后一天
this.year = y
let seletSplit = this.value
let i, line = 0,temp = [],nextMonthPushDays = 1
for (i = 1; i <= lastDateOfMonth; i++) {
let day = new Date(y, m, i).getDay() //返回星期几(0~6)
let k
// 第一行
if (day == 0) {
temp[line] = []
} else if (i == 1) {
temp[line] = []
k = lastDayOfLastMonth - firstDayOfMonth + 1
for (let j = 0; j < firstDayOfMonth; j++) {
// console.log("第一行",lunarYear,lunarMonth,lunarValue,lunarInfo)
temp[line].push(Object.assign(
{day: k,disabled: true},
this.getLunarInfo(this.computedPrevYear(),this.computedPrevMonth(true),k),
this.getEvents(this.computedPrevYear(),this.computedPrevMonth(true),k),
))
k++;
}
}
if (this.range) { // 范围
// console.log("日期范围",this.getLunarInfo(this.
vue日历组件封装,可全选,可单选,并可以取各自的值_vue日期选择组件
最新推荐文章于 2024-07-25 11:05:20 发布