好用的日历控件
传入参数date如:new Date()
<template> <div class="calendar"> <div class="week-box"> <span v-for="item in day" class="color-999999 font-14">{{item}}</span> </div> <div> <div v-for="item in calendarData" class="xy-calendar-module"> <span v-for="day in item" class="box color-666666">{{day.day}}</span> </div> </div> </div> </template> <script> export default { props: { date: { type: Date, default: new Date() } }, data() { return { day: ['日', '一', '二', '三', '四', '五', '六'], calendarData: [], nowYear: new Date().getFullYear(), nowMonth: new Date().getMonth() + 1, nowDay: new Date().getDate(), } }, mounted () { if (!!this.$props.date) { this.setDate(); } this.initData(this.nowYear, this.nowMonth); }, watch: { date (val) { this.setDate(); this.initData(this.nowYear, this.nowMonth); } }, methods: { setDate () { this.nowYear = new Date(this.$props.date).getFullYear() this.nowMonth = new Date(this.$props.date).getMonth() + 1 this.nowDay = new Date(this.$props.date).getDate() }, initData (year,month) { const days = this.days(year,month); // 当前月份天数 let enableSelect; let arr = Array.from({length: days}, (x, index )=>index + 1).map(item => { return { day: item, name: this.getDayName(year, month, item), week: this.getDateWeek(year, month, item) } }); // 最前边是星期一 let beforeDayNum = arr[0].week - 1; let afterDayNum = 7 - arr[days-1].week; // 最前边是星期日 let beforeDayNum = arr[0].week == 7 ? 0 : arr[0].week; let afterDayNum = 6 - arr[days-1].week == -1 ? 6 : 6 - arr[days-1].week; var beforeDayArr = this.completionDays(beforeDayNum); var afterDayArr = this.completionDays(afterDayNum); var allArr = [...beforeDayArr, ...arr, ...afterDayArr]; this.calendarData = this.splitArray(allArr); console.log(afterDayNum) }, splitArray (arr) { var result = []; for(var i=0; i < arr.length; i+=7){ result.push(arr.slice(i,i+7)); } return result }, completionDays (num) { return Array.from({length: num}, (x, index )=>index + 1).map(item => { return { day: null, week: null } }) }, // 一个月多少天 days(year,month){ var dayCount; let now = new Date(year,month, 0); dayCount = now.getDate(); return dayCount; }, // 某一天星期几 getDateWeek (year,month,day) { var tmpdate = new Date(year,month-1,day).getDay(); return tmpdate === 0 ? 7 : tmpdate; }, getToday () { let nowYear = new Date().getFullYear(); let nowMonth = new Date().getMonth() + 1; let nowDay = new Date().getDate(); return { nowYear, nowMonth, nowDay } }, getDayName (year, month, day) { if (year == this.getToday().nowYear && month == this.getToday().nowMonth && day == this.getToday().nowDay) { return '今天' } return `${day}` } } } </script> <style scoped> .calendar{ margin: 0 auto; background: #FFFFFF; } .xy-calendar-module{ position: relative; display: flex; height: .44rem; line-height: .44rem; } .box{ flex: 1; position: relative; text-align: center; } .week-box{ display: flex; height: .44rem; line-height: .44rem; } .week-box span{ flex: 1; text-align: center; } </style>