You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
378 lines
14 KiB
378 lines
14 KiB
// components/xx-calendar/xx-calendar.js
|
|
import calendarFormatter from "./xx_calendar";
|
|
Component({
|
|
/**
|
|
* 组件的属性列表
|
|
*/
|
|
properties: {
|
|
use_date_arr:{
|
|
type:Array,
|
|
value:[]
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 组件的初始数据
|
|
*/
|
|
data: {
|
|
// 本月指的是选择的当前月份
|
|
year: new Date().getFullYear(),
|
|
month: new Date().getMonth() + 1,
|
|
weeksArr: ['日', '一', '二', '三', '四', '五', '六'],
|
|
nowMonth: new Date().getMonth() + 1, //本月是几月
|
|
nowDay: new Date().getDate(), //本月当天的日期
|
|
lastMonthDays: [], //上一个月
|
|
nowMonthDays: [], //本月
|
|
nextMonthDays: [], //下一个月
|
|
weekDay:[], //周 日期list
|
|
activeDateStr:'', // 当前日期,
|
|
currentViewType: 'week' //当前选中的是周还是月
|
|
},
|
|
|
|
/**
|
|
* 组件的方法列表
|
|
*/
|
|
methods: {
|
|
//获取当月天数
|
|
getThisMonthDays(year, month) {
|
|
return new Date(year, month, 0).getDate();
|
|
},
|
|
/** 总方法 */
|
|
//创建日期
|
|
createDays(year, month) {
|
|
|
|
if( this.data.currentViewType === "month" ) {
|
|
this.getLastMonthDays(year, month)
|
|
this.getNowMonthDays(year, month)
|
|
this.getNextMonthDays(year, month)
|
|
} else {
|
|
this.getWeekData()
|
|
}
|
|
|
|
},
|
|
|
|
/** 视图收起/展开 */
|
|
toggleMode() {
|
|
this.setData({
|
|
currentViewType: this.data.currentViewType === "month" ? "week" : "month",
|
|
})
|
|
const activeDateStr = this.data.activeDateStr
|
|
const arr = activeDateStr.split("/")
|
|
const { year, month} = this.data
|
|
if( this.data.currentViewType === "month" ) {
|
|
this.getLastMonthDays(year, month)
|
|
this.getNowMonthDays(year, month)
|
|
this.getNextMonthDays(year, month)
|
|
} else {
|
|
this.getWeekData()
|
|
}
|
|
this.setData({
|
|
headerDate: `${arr[0]} 年 ${arr[1]} 月`
|
|
})
|
|
this.triggerEvent('modeChange', {
|
|
viewType: this.data.currentViewType,
|
|
});
|
|
},
|
|
/** 获取上个月日期 */
|
|
getLastMonthDays(year, month) {
|
|
let nowMonthFirstDays = new Date(year, month - 1, 1).getDay()
|
|
let lastMonthDays = []
|
|
if (nowMonthFirstDays) { //判断当月的第一天是不是星期天
|
|
//上个月显示多少天
|
|
let lastMonthNums = month - 1 < 0 ? this.getThisMonthDays(year - 1, 12) : this.getThisMonthDays(year, month - 1); //判断是否会跨年
|
|
//上个月从几号开始显示
|
|
for (let i = lastMonthNums - nowMonthFirstDays + 1; i <= lastMonthNums; i++) {
|
|
|
|
let time = new Date(year, month - 2, i).toLocaleDateString() //对应的时间
|
|
let timer = time.replace(/\//g, "-")
|
|
|
|
lastMonthDays.push({
|
|
date: i, //几号
|
|
week: this.data.weeksArr[new Date(year, month - 2, i).getDay()], //星期几
|
|
time:time,
|
|
isNowMonthDay: ''
|
|
});
|
|
}
|
|
}
|
|
this.setData({
|
|
lastMonthDays
|
|
})
|
|
console.log(lastMonthDays);
|
|
},
|
|
/** 获取当月日期 */
|
|
getNowMonthDays(year, month) {
|
|
let {
|
|
nowMonth,
|
|
nowDay
|
|
} = this.data
|
|
let nowMonthDays = []
|
|
let days = this.getThisMonthDays(year, month); //获取当月的天数
|
|
for (let i = 1; i <= days; i++) {
|
|
let d = new Date(year, month - 1, i)
|
|
let years = d.getFullYear()
|
|
let months = d.getMonth() + 1
|
|
let day2 = d.getDate()
|
|
let time = `${years+'/'+months +'/'+day2}` // 2022/3/3
|
|
let timer = time.replace(/\//g, "-")
|
|
let timer2 = timer.split('-')
|
|
var day = calendarFormatter.solar2lunar(timer2[0], timer2[1], timer2[2]);
|
|
let newdate
|
|
if (day.IDayCn == '初一') {
|
|
newdate = day.IMonthCn
|
|
} else {
|
|
newdate = day.IDayCn
|
|
}
|
|
// 当前月数据
|
|
let festival = calendarFormatter.getFestival(timer) // 返回当前节假日名称, 不是节日返回 '工作日'
|
|
nowMonthDays.push({
|
|
date: i, //几号
|
|
week: this.data.weeksArr[new Date(year, month - 1, i).getDay()], //星期几
|
|
time,
|
|
color: false,
|
|
day: ['工作日', '周末'].includes(festival) || festival.indexOf('补') > -1 ? newdate : festival,
|
|
// day: ['工作日', '周末'].includes(festival) || festival.indexOf('补') > -1 || [如果有不想展示的日期,放这里].includes(timer) ? newdate : festival,
|
|
|
|
isNowMonthDay: (month == nowMonth && i == nowDay) ? "isNowMonthDay" : "",
|
|
isHoliday: calendarFormatter.isHoliday(timer), // 判断是否是休息日 是的话返回true, 不是的话返回false
|
|
|
|
});
|
|
}
|
|
this.data.use_date_arr.forEach(ele => {
|
|
ele = ele.replace(/\-/g, "/")
|
|
nowMonthDays.forEach(item => {
|
|
if (ele == item.time) {
|
|
console.log(item);
|
|
item.color = true
|
|
}
|
|
})
|
|
})
|
|
this.setData({
|
|
nowMonthDays
|
|
})
|
|
},
|
|
/** 获取下个月日期 */
|
|
getNextMonthDays(year, month) {
|
|
let {
|
|
lastMonthDays,
|
|
nowMonthDays,
|
|
} = this.data
|
|
let nextMonthDays = []
|
|
let nextMonthNums = (lastMonthDays.length + nowMonthDays.length) > 35 ? 42 - (lastMonthDays.length + nowMonthDays.length) : 35 - (lastMonthDays.length + nowMonthDays.length) //下个月显示多少天
|
|
let nowYear = (parseInt(month) + 1) > 12 ? year + 1 : year //下一个月的年份
|
|
let nowMonth = (parseInt(month) + 1) > 12 ? 1 : parseInt(month) + 1 //下一个月的月份
|
|
if (nextMonthNums) { //判断当前天数是否大于零
|
|
for (let i = 1; i <= nextMonthNums; i++) {
|
|
let time = new Date(year, month - 1, i).toLocaleDateString()
|
|
nextMonthDays.push({
|
|
date: i, //几号
|
|
week: this.data.weeksArr[new Date(nowYear, nowMonth - 1, i).getDay()], //星期几
|
|
time,
|
|
isNowMonthDay: ''
|
|
});
|
|
}
|
|
}
|
|
this.setData({
|
|
nextMonthDays
|
|
})
|
|
console.log(nextMonthDays)
|
|
},
|
|
/** 切换月份 */
|
|
changeMonthFun(e){
|
|
if (this.data.currentViewType === "month") {
|
|
let {
|
|
year,
|
|
month,
|
|
nowDay
|
|
} = this.data
|
|
let type = e.currentTarget.dataset.type //类型
|
|
if (type == 'prev') { //上一个月
|
|
year = month - 1 > 0 ? year : year - 1
|
|
month = month - 1 > 0 ? month - 1 : 12
|
|
} else { //next 下个月
|
|
year = (parseInt(month) + 1) > 12 ? year + 1 : year
|
|
month = (parseInt(month) + 1) > 12 ? 1 : parseInt(month) + 1
|
|
}
|
|
this.setData({
|
|
year,
|
|
month,
|
|
nowMonth: month,
|
|
activeDateStr: `${year}/${month}/${nowDay}`
|
|
})
|
|
this.createDays(year, month)
|
|
} else {
|
|
let type = e.currentTarget.dataset.type //类型
|
|
let newActiveDateStr = this.getActiveDateStrByWeek(this.data.activeDateStr, type)
|
|
this.getWeekData(newActiveDateStr)
|
|
this.setData({
|
|
activeDateStr: newActiveDateStr,
|
|
})
|
|
}
|
|
|
|
},
|
|
|
|
/** 获取周视图数据 */
|
|
getWeekData(defaultDate) {
|
|
/** 是否是从周一开始 */
|
|
const isStartFromMonday = this.properties.startDay === "monday"
|
|
if (!defaultDate) {
|
|
defaultDate = this.data.activeDateStr
|
|
}
|
|
const YEAR = new Date(defaultDate).getFullYear()
|
|
const MONTH = new Date(defaultDate).getMonth() + 1
|
|
const DATE = new Date(defaultDate).getDate()
|
|
const WEEK = isStartFromMonday
|
|
? new Date(defaultDate).getDay() || 7
|
|
: new Date(defaultDate).getDay()
|
|
/** 上月最后一天 */
|
|
let lastDayOfLastMonth = new Date(YEAR, MONTH - 1, 0)
|
|
/** 上月最后一天是周几 */
|
|
let lastDateOfLastMonth = lastDayOfLastMonth.getDate()
|
|
/** 当月最后一天 */
|
|
let lastDay = new Date(YEAR, MONTH, 0)
|
|
/** 当月最后一天是几号 */
|
|
let lastDate = lastDay.getDate()
|
|
|
|
var ret = []
|
|
/** 前面有几天 */
|
|
let preCount = isStartFromMonday ? WEEK - 1 : WEEK
|
|
for (let i = 0; i < 7; i++) {
|
|
/** 用于计算的日期，可能为负数，可能大于当月最后一天 */
|
|
let date = i + (DATE - preCount)
|
|
/** 真实的日期 */
|
|
let showDate = date
|
|
/** 真实的月 */
|
|
let showMonth = MONTH
|
|
/** 真实的年 */
|
|
let showYear = YEAR
|
|
if (date <= 0) {
|
|
// 上个月
|
|
showMonth = MONTH - 1
|
|
showDate = lastDateOfLastMonth + date
|
|
} else if (date > lastDate) {
|
|
// 下个月
|
|
showMonth = MONTH + 1
|
|
showDate = showDate - lastDate
|
|
}
|
|
if (showMonth === 0) {
|
|
showMonth = 12
|
|
showYear = YEAR - 1
|
|
}
|
|
if (showMonth === 13) {
|
|
showMonth = 1
|
|
showYear = YEAR + 1
|
|
}
|
|
var day = calendarFormatter.solar2lunar(showYear,showMonth, showDate);
|
|
let newdate
|
|
if (day.IDayCn == '初一') {
|
|
newdate = day.IMonthCn
|
|
} else {
|
|
newdate = day.IDayCn
|
|
}
|
|
let {
|
|
month,
|
|
nowDay
|
|
} = this.data
|
|
// 当前周数据
|
|
let festival = calendarFormatter.getFestival(`${showYear}-${showMonth}-${showDate}`) // 返回当前节假日名称, 不是节日返回 '工作日'
|
|
ret.push({
|
|
year: showYear,
|
|
month: showMonth,
|
|
date: showDate,
|
|
calDate: date,
|
|
day: ['工作日', '周末'].includes(festival) || festival.indexOf('补') > -1 ? newdate : festival,
|
|
dateStr: `${showYear}/${showMonth}/${showDate}`,
|
|
isNowMonthDay: (month == showMonth && nowDay == showDate) ? "isNowMonthDay" : "",
|
|
isHoliday: calendarFormatter.isHoliday(`${showYear}-${showMonth}-${showDate}`), // 判断是否是休息日 是的话返回true, 不是的话返回false
|
|
})
|
|
}
|
|
this.setData({
|
|
weekDay: ret,
|
|
year: YEAR,
|
|
month: MONTH,
|
|
})
|
|
},
|
|
|
|
/**
|
|
* 周视图下，左右切换时，获取新的高亮日期
|
|
* @param {string} curActiveDateStr 当前高亮的日期
|
|
* @param {string} type "prev" or "next"
|
|
*/
|
|
getActiveDateStrByWeek(curActiveDateStr, type) {
|
|
const arr = curActiveDateStr.split("/")
|
|
const year = +arr[0]
|
|
const month = +arr[1]
|
|
const date = +arr[2]
|
|
|
|
let newYear = year, newMonth = month, newDate = date;
|
|
/** 上月最后一天 */
|
|
const lastMonthLastDate = new Date(year, month - 1, 0).getDate()
|
|
/** 本月最后一天 */
|
|
const curMonthLastDate = new Date(year, month, 0).getDate()
|
|
if (type === "prev") {
|
|
// 如果减7小于0， 说明跳月了
|
|
if (date - 7 <= 0) {
|
|
newYear = month === 1 ? year - 1 : year
|
|
newMonth = month === 1 ? 12 : month - 1
|
|
newDate = lastMonthLastDate + date - 7
|
|
} else {
|
|
newDate = date - 7
|
|
}
|
|
} else if (type == "next") {
|
|
// 如果加7大于本月最后一天，说明跳月了
|
|
if (date + 7 > curMonthLastDate) {
|
|
newYear = month === 12 ? year + 1 : year
|
|
newMonth = month === 12 ? 1 : month + 1
|
|
newDate = (date + 7) - curMonthLastDate
|
|
} else {
|
|
newDate = date + 7
|
|
}
|
|
}
|
|
return `${newYear}/${newMonth}/${newDate}`
|
|
},
|
|
|
|
|
|
/** 选择日期触发 */
|
|
selectDate(e){
|
|
let type = e.currentTarget.dataset.type //选择的时间类型
|
|
let index = e.currentTarget.dataset.index //选择的下标
|
|
// let date = e.currentTarget.dataset.item.time //选择的下标
|
|
let date = e.currentTarget.dataset.item.dateStr //选择的下标
|
|
let selectDate = date.replace(/\//g, "-")
|
|
console.log("选择的时间", selectDate)
|
|
// 自定义事件，父组件调用，回调 选择的时间selectDate
|
|
this.triggerEvent('selectDate', selectDate)
|
|
//将选择的时间类型的 isNowMonthDay 全改为''
|
|
this.data[type]?.forEach(item => {
|
|
item.isNowMonthDay = ''
|
|
})
|
|
this.data[type]?.forEach((item, idx) => {
|
|
if (index == idx) {
|
|
item.isNowMonthDay = (item.time == new Date().toLocaleDateString() ? "isNowMonthDay" : "isNotNowMonthDay"); //判断当前选中的日期是否是当前时间
|
|
} else {
|
|
item.isNowMonthDay = ''
|
|
}
|
|
})
|
|
const dateArr = date.split('/')
|
|
this.setData({
|
|
[type]: this.data[type],
|
|
activeDateStr: date,
|
|
year: dateArr[0],
|
|
month:dateArr[1],
|
|
nowMonth: dateArr[1],
|
|
nowDay: dateArr[2],
|
|
})
|
|
},
|
|
},
|
|
ready() {
|
|
let {
|
|
year,
|
|
month,
|
|
nowDay
|
|
} = this.data
|
|
this.setData({
|
|
activeDateStr: `${year}/${month}/${nowDay}`
|
|
})
|
|
this.createDays(year, month, nowDay)
|
|
|
|
}
|
|
})
|