422 lines
9.8 KiB
JavaScript
422 lines
9.8 KiB
JavaScript
class Calendar {
|
||
constructor({
|
||
selected,
|
||
startDate,
|
||
endDate,
|
||
range,
|
||
} = {}) {
|
||
// 当前日期
|
||
this.date = this.getDateObj(new Date()) // 当前初入日期
|
||
// 打点信息
|
||
this.selected = selected || [];
|
||
// 起始时间
|
||
this.startDate = startDate
|
||
// 终止时间
|
||
this.endDate = endDate
|
||
// 是否范围选择
|
||
this.range = range
|
||
// 多选状态
|
||
this.cleanMultipleStatus()
|
||
// 每周日期
|
||
this.weeks = {}
|
||
this.lastHover = false
|
||
}
|
||
/**
|
||
* 设置日期
|
||
* @param {Object} date
|
||
*/
|
||
setDate(date) {
|
||
const selectDate = this.getDateObj(date)
|
||
this.getWeeks(selectDate.fullDate)
|
||
}
|
||
|
||
/**
|
||
* 清理多选状态
|
||
*/
|
||
cleanMultipleStatus() {
|
||
this.multipleStatus = {
|
||
before: '',
|
||
after: '',
|
||
data: []
|
||
}
|
||
}
|
||
|
||
setStartDate(startDate) {
|
||
this.startDate = startDate
|
||
}
|
||
|
||
setEndDate(endDate) {
|
||
this.endDate = endDate
|
||
}
|
||
|
||
getPreMonthObj(date) {
|
||
date = fixIosDateFormat(date)
|
||
date = new Date(date)
|
||
|
||
const oldMonth = date.getMonth()
|
||
date.setMonth(oldMonth - 1)
|
||
const newMonth = date.getMonth()
|
||
if (oldMonth !== 0 && newMonth - oldMonth === 0) {
|
||
date.setMonth(newMonth - 1)
|
||
}
|
||
return this.getDateObj(date)
|
||
}
|
||
getNextMonthObj(date) {
|
||
date = fixIosDateFormat(date)
|
||
date = new Date(date)
|
||
|
||
const oldMonth = date.getMonth()
|
||
date.setMonth(oldMonth + 1)
|
||
const newMonth = date.getMonth()
|
||
if (newMonth - oldMonth > 1) {
|
||
date.setMonth(newMonth - 1)
|
||
}
|
||
return this.getDateObj(date)
|
||
}
|
||
|
||
/**
|
||
* 获取指定格式Date对象
|
||
*/
|
||
getDateObj(date) {
|
||
date = fixIosDateFormat(date)
|
||
date = new Date(date)
|
||
|
||
return {
|
||
fullDate: getDate(date),
|
||
year: date.getFullYear(),
|
||
month: addZero(date.getMonth() + 1),
|
||
date: addZero(date.getDate()),
|
||
day: date.getDay()
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 获取上一个月日期集合
|
||
*/
|
||
getPreMonthDays(amount, dateObj) {
|
||
const result = []
|
||
for (let i = amount - 1; i >= 0; i--) {
|
||
const month = dateObj.month - 1
|
||
result.push({
|
||
date: new Date(dateObj.year, month, -i).getDate(),
|
||
month,
|
||
disable: true
|
||
})
|
||
}
|
||
return result
|
||
}
|
||
/**
|
||
* 获取本月日期集合
|
||
*/
|
||
getCurrentMonthDays(amount, dateObj) {
|
||
const result = []
|
||
const fullDate = this.date.fullDate
|
||
for (let i = 1; i <= amount; i++) {
|
||
const currentDate = `${dateObj.year}-${dateObj.month}-${addZero(i)}`
|
||
const isToday = fullDate === currentDate
|
||
// 获取打点信息
|
||
const info = this.selected && this.selected.find((item) => {
|
||
if (this.dateEqual(currentDate, item.date)) {
|
||
return item
|
||
}
|
||
})
|
||
|
||
// 日期禁用
|
||
let disableBefore = true
|
||
let disableAfter = true
|
||
if (this.startDate) {
|
||
disableBefore = dateCompare(this.startDate, currentDate)
|
||
}
|
||
|
||
if (this.endDate) {
|
||
disableAfter = dateCompare(currentDate, this.endDate)
|
||
}
|
||
|
||
let multiples = this.multipleStatus.data
|
||
let multiplesStatus = -1
|
||
if (this.range && multiples) {
|
||
multiplesStatus = multiples.findIndex((item) => {
|
||
return this.dateEqual(item, currentDate)
|
||
})
|
||
}
|
||
const checked = multiplesStatus !== -1
|
||
|
||
result.push({
|
||
fullDate: currentDate,
|
||
year: dateObj.year,
|
||
date: i,
|
||
multiple: this.range ? checked : false,
|
||
beforeMultiple: this.isLogicBefore(currentDate, this.multipleStatus.before, this.multipleStatus.after),
|
||
afterMultiple: this.isLogicAfter(currentDate, this.multipleStatus.before, this.multipleStatus.after),
|
||
month: dateObj.month,
|
||
disable: (this.startDate && !dateCompare(this.startDate, currentDate)) || (this.endDate && !dateCompare(
|
||
currentDate, this.endDate)),
|
||
isToday,
|
||
userChecked: false,
|
||
extraInfo: info
|
||
})
|
||
}
|
||
return result
|
||
}
|
||
/**
|
||
* 获取下一个月日期集合
|
||
*/
|
||
_getNextMonthDays(amount, dateObj) {
|
||
const result = []
|
||
const month = dateObj.month + 1
|
||
for (let i = 1; i <= amount; i++) {
|
||
result.push({
|
||
date: i,
|
||
month,
|
||
disable: true
|
||
})
|
||
}
|
||
return result
|
||
}
|
||
|
||
/**
|
||
* 获取当前日期详情
|
||
* @param {Object} date
|
||
*/
|
||
getInfo(date) {
|
||
if (!date) {
|
||
date = new Date()
|
||
}
|
||
|
||
return this.calendar.find(item => item.fullDate === this.getDateObj(date).fullDate)
|
||
}
|
||
|
||
/**
|
||
* 比较时间是否相等
|
||
*/
|
||
dateEqual(before, after) {
|
||
before = new Date(fixIosDateFormat(before))
|
||
after = new Date(fixIosDateFormat(after))
|
||
return before.valueOf() === after.valueOf()
|
||
}
|
||
|
||
/**
|
||
* 比较真实起始日期
|
||
*/
|
||
|
||
isLogicBefore(currentDate, before, after) {
|
||
let logicBefore = before
|
||
if (before && after) {
|
||
logicBefore = dateCompare(before, after) ? before : after
|
||
}
|
||
return this.dateEqual(logicBefore, currentDate)
|
||
}
|
||
|
||
isLogicAfter(currentDate, before, after) {
|
||
let logicAfter = after
|
||
if (before && after) {
|
||
logicAfter = dateCompare(before, after) ? after : before
|
||
}
|
||
return this.dateEqual(logicAfter, currentDate)
|
||
}
|
||
|
||
/**
|
||
* 获取日期范围内所有日期
|
||
* @param {Object} begin
|
||
* @param {Object} end
|
||
*/
|
||
geDateAll(begin, end) {
|
||
var arr = []
|
||
var ab = begin.split('-')
|
||
var ae = end.split('-')
|
||
var db = new Date()
|
||
db.setFullYear(ab[0], ab[1] - 1, ab[2])
|
||
var de = new Date()
|
||
de.setFullYear(ae[0], ae[1] - 1, ae[2])
|
||
var unixDb = db.getTime() - 24 * 60 * 60 * 1000
|
||
var unixDe = de.getTime() - 24 * 60 * 60 * 1000
|
||
for (var k = unixDb; k <= unixDe;) {
|
||
k = k + 24 * 60 * 60 * 1000
|
||
arr.push(this.getDateObj(new Date(parseInt(k))).fullDate)
|
||
}
|
||
return arr
|
||
}
|
||
|
||
/**
|
||
* 获取多选状态
|
||
*/
|
||
setMultiple(fullDate) {
|
||
if (!this.range) return
|
||
|
||
let {
|
||
before,
|
||
after
|
||
} = this.multipleStatus
|
||
if (before && after) {
|
||
if (!this.lastHover) {
|
||
this.lastHover = true
|
||
return
|
||
}
|
||
this.multipleStatus.before = fullDate
|
||
this.multipleStatus.after = ''
|
||
this.multipleStatus.data = []
|
||
this.multipleStatus.fulldate = ''
|
||
this.lastHover = false
|
||
} else {
|
||
if (!before) {
|
||
this.multipleStatus.before = fullDate
|
||
this.multipleStatus.after = undefined;
|
||
this.lastHover = false
|
||
} else {
|
||
this.multipleStatus.after = fullDate
|
||
if (dateCompare(this.multipleStatus.before, this.multipleStatus.after)) {
|
||
this.multipleStatus.data = this.geDateAll(this.multipleStatus.before, this.multipleStatus
|
||
.after);
|
||
} else {
|
||
this.multipleStatus.data = this.geDateAll(this.multipleStatus.after, this.multipleStatus
|
||
.before);
|
||
}
|
||
this.lastHover = true
|
||
}
|
||
}
|
||
this.getWeeks(fullDate)
|
||
}
|
||
|
||
/**
|
||
* 鼠标 hover 更新多选状态
|
||
*/
|
||
setHoverMultiple(fullDate) {
|
||
//抖音小程序点击会触发hover事件，需要避免一下
|
||
// #ifndef MP-TOUTIAO
|
||
if (!this.range || this.lastHover) return
|
||
const {
|
||
before
|
||
} = this.multipleStatus
|
||
|
||
if (!before) {
|
||
this.multipleStatus.before = fullDate
|
||
} else {
|
||
this.multipleStatus.after = fullDate
|
||
if (dateCompare(this.multipleStatus.before, this.multipleStatus.after)) {
|
||
this.multipleStatus.data = this.geDateAll(this.multipleStatus.before, this.multipleStatus.after);
|
||
} else {
|
||
this.multipleStatus.data = this.geDateAll(this.multipleStatus.after, this.multipleStatus.before);
|
||
}
|
||
}
|
||
this.getWeeks(fullDate)
|
||
// #endif
|
||
|
||
}
|
||
|
||
/**
|
||
* 更新默认值多选状态
|
||
*/
|
||
setDefaultMultiple(before, after) {
|
||
this.multipleStatus.before = before
|
||
this.multipleStatus.after = after
|
||
if (before && after) {
|
||
if (dateCompare(before, after)) {
|
||
this.multipleStatus.data = this.geDateAll(before, after);
|
||
this.getWeeks(after)
|
||
} else {
|
||
this.multipleStatus.data = this.geDateAll(after, before);
|
||
this.getWeeks(before)
|
||
}
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 获取每周数据
|
||
* @param {Object} dateData
|
||
*/
|
||
getWeeks(dateData) {
|
||
const {
|
||
year,
|
||
month,
|
||
} = this.getDateObj(dateData)
|
||
|
||
const preMonthDayAmount = new Date(year, month - 1, 1).getDay()
|
||
const preMonthDays = this.getPreMonthDays(preMonthDayAmount, this.getDateObj(dateData))
|
||
|
||
const currentMonthDayAmount = new Date(year, month, 0).getDate()
|
||
const currentMonthDays = this.getCurrentMonthDays(currentMonthDayAmount, this.getDateObj(dateData))
|
||
|
||
const nextMonthDayAmount = 42 - preMonthDayAmount - currentMonthDayAmount
|
||
const nextMonthDays = this._getNextMonthDays(nextMonthDayAmount, this.getDateObj(dateData))
|
||
|
||
const calendarDays = [...preMonthDays, ...currentMonthDays, ...nextMonthDays]
|
||
|
||
const weeks = new Array(6)
|
||
for (let i = 0; i < calendarDays.length; i++) {
|
||
const index = Math.floor(i / 7)
|
||
if (!weeks[index]) {
|
||
weeks[index] = new Array(7)
|
||
}
|
||
weeks[index][i % 7] = calendarDays[i]
|
||
}
|
||
|
||
this.calendar = calendarDays
|
||
this.weeks = weeks
|
||
}
|
||
}
|
||
|
||
function getDateTime(date, hideSecond) {
|
||
return `${getDate(date)} ${getTime(date, hideSecond)}`
|
||
}
|
||
|
||
function getDate(date) {
|
||
date = fixIosDateFormat(date)
|
||
date = new Date(date)
|
||
const year = date.getFullYear()
|
||
const month = date.getMonth() + 1
|
||
const day = date.getDate()
|
||
return `${year}-${addZero(month)}-${addZero(day)}`
|
||
}
|
||
|
||
function getTime(date, hideSecond) {
|
||
date = fixIosDateFormat(date)
|
||
date = new Date(date)
|
||
const hour = date.getHours()
|
||
const minute = date.getMinutes()
|
||
const second = date.getSeconds()
|
||
return hideSecond ? `${addZero(hour)}:${addZero(minute)}` : `${addZero(hour)}:${addZero(minute)}:${addZero(second)}`
|
||
}
|
||
|
||
function addZero(num) {
|
||
if (num < 10) {
|
||
num = `0${num}`
|
||
}
|
||
return num
|
||
}
|
||
|
||
function getDefaultSecond(hideSecond) {
|
||
return hideSecond ? '00:00' : '00:00:00'
|
||
}
|
||
|
||
function dateCompare(startDate, endDate) {
|
||
startDate = new Date(fixIosDateFormat(startDate))
|
||
endDate = new Date(fixIosDateFormat(endDate))
|
||
return startDate <= endDate
|
||
}
|
||
|
||
function checkDate(date) {
|
||
const dateReg = /((19|20)\d{2})(-|\/)\d{1,2}(-|\/)\d{1,2}/g
|
||
return date.match(dateReg)
|
||
}
|
||
//ios低版本15及以下，无法匹配 没有 ’秒‘ 时的情况，所以需要在末尾 秒 加上 问号
|
||
const dateTimeReg = /^\d{4}-(0?[1-9]|1[012])-(0?[1-9]|[12][0-9]|3[01])( [0-5]?[0-9]:[0-5]?[0-9](:[0-5]?[0-9])?)?$/;
|
||
|
||
function fixIosDateFormat(value) {
|
||
if (typeof value === 'string' && dateTimeReg.test(value)) {
|
||
value = value.replace(/-/g, '/')
|
||
}
|
||
return value
|
||
}
|
||
|
||
export {
|
||
Calendar,
|
||
getDateTime,
|
||
getDate,
|
||
getTime,
|
||
addZero,
|
||
getDefaultSecond,
|
||
dateCompare,
|
||
checkDate,
|
||
fixIosDateFormat
|
||
}
|