<template>
|
<view class="uni-calendar-date">
|
<swiper class="uni-panel-swiper" :style="{height:weeks_height}" circular current="currentSwiper"
|
@change="changeSwiper">
|
<swiper-item>
|
<view class="uni-table-col">
|
<view class="uni-table-row"
|
:style="(!retract || weekIndex == to_prev_week_index)? 'display: flex;': 'display: none;'"
|
v-for="(item,weekIndex) in weeks_prev_co" :key="weekIndex">
|
<view class="uni-calendar-weeks-item" v-for="(days,weeksIndex) in item" :key="weeksIndex">
|
<dateCalendarItem class="uni-calendar-weeks-day" :weeks="days" :calendar="calendar"
|
:retract="retract" :lunar="lunar" @change="choiceDate"></dateCalendarItem>
|
</view>
|
</view>
|
</view>
|
</swiper-item>
|
<swiper-item>
|
<view class="uni-table-col">
|
<view class="uni-table-row"
|
:style="(!retract || weekIndex == to_week_index)? 'display: flex;': 'display: none;'"
|
v-for="(item,weekIndex) in weeks" :key="weekIndex">
|
<view class="uni-calendar-weeks-item" v-for="(days,weeksIndex) in item" :key="weeksIndex">
|
<dateCalendarItem class="uni-calendar-weeks-day" :weeks="days" :calendar="calendar"
|
:retract="retract" :lunar="lunar" @change="choiceDate"></dateCalendarItem>
|
</view>
|
</view>
|
</view>
|
</swiper-item>
|
<swiper-item>
|
<view class="uni-table-col">
|
<view class="uni-table-row"
|
:style=" (!retract || weekIndex == to_next_week_index)? 'display: flex;': 'display: none;'"
|
v-for="(item,weekIndex) in weeks_next_co" :key="weekIndex">
|
<view class="uni-calendar-weeks-item" v-for="(days,weeksIndex) in item" :key="weeksIndex">
|
<dateCalendarItem class="uni-calendar-weeks-day" :weeks="days" :calendar="calendar"
|
:retract="retract" :lunar="lunar" @change="choiceDate"></dateCalendarItem>
|
</view>
|
</view>
|
</view>
|
</swiper-item>
|
</swiper>
|
<view class="uni-table-row" v-if="canWeekView">
|
<view class="uni-panel-calendar-arrow stretch fs-ArrowDown" :class="{'uni-panel-calendar-arrow2':retract}"
|
@click="clickRetract"></view>
|
</view>
|
</view>
|
|
</template>
|
|
<script>
|
import CalendarUtil from "@/common/calendarUtil.js"
|
import dateCalendarItem from './date-item.vue'
|
export default {
|
name: "calendarDate",
|
components: {
|
dateCalendarItem
|
},
|
emits: ['change', 'monthSwitch', 'weekSwitch'],
|
props: {
|
date: {
|
type: String,
|
default: ''
|
},
|
lunar: {
|
type: Boolean,
|
default: false
|
},
|
canWeekView: {
|
type: Boolean,
|
default: true
|
},
|
viewWeek: {
|
type: Boolean,
|
default: true
|
},
|
selected: {
|
type: Array,
|
default () {
|
return []
|
}
|
},
|
},
|
data() {
|
return {
|
currentSwiper: 0,
|
weeks: [],
|
weeks_prev: [],
|
weeks_prev_week: [],
|
weeks_next: [],
|
weeks_next_week: [],
|
calendar: {},
|
nowDate: '',
|
retract: true,
|
to_week_index: 0,
|
to_prev_week_index: 0,
|
to_next_week_index: 0,
|
|
}
|
},
|
computed: {
|
weeks_prev_co() {
|
return this.retract ? this.weeks_prev_week : this.weeks_prev
|
},
|
weeks_next_co() {
|
return this.retract ? this.weeks_next_week : this.weeks_next
|
},
|
weeks_height() {
|
if (this.retract)
|
return '100rpx'
|
else {
|
if (this.currentSwiper == 1) {
|
return (this.weeks.length * 100) + 'rpx'
|
} else if (this.currentSwiper == 2) {
|
return (this.weeks_next.length * 100) + 'rpx'
|
} else {
|
return (this.weeks_prev.length * 100) + 'rpx'
|
}
|
}
|
},
|
},
|
watch: {
|
date(newVal) {
|
this.init(newVal)
|
},
|
selected(newVal) {
|
//console.log("calendar-date selected",newVal )
|
this.cale.setSelectInfo(this.nowDate.fullDate, newVal)
|
this.updateWeeks()
|
this.updateWeek()
|
//console.log("calendar-date week",this.weeks_prev )
|
},
|
canWeekView(newVal) {
|
// console.log("canWeekView",newVal )
|
if (!newVal) {
|
this.retract = false
|
this.updateWeeks()
|
}
|
},
|
lunar(newVal) {
|
//console.log("calendar-date lunar",newVal)
|
},
|
|
},
|
created() {
|
// 获取日历方法实例
|
this.cale = new CalendarUtil({
|
// date: new Date(),
|
selected: this.selected,
|
startDate: this.startDate,
|
endDate: this.endDate,
|
range: this.range,
|
})
|
// 选中某一天
|
// this.cale.setDate(this.date)
|
this.init(this.date)
|
// this.setDay
|
},
|
mounted() {
|
if (!this.canWeekView) {
|
this.retract = false
|
} else {
|
this.retract = this.viewWeek
|
}
|
},
|
methods: {
|
setData: function(obj) {
|
let that = this;
|
let keys = [];
|
let val, data;
|
|
Object.keys(obj).forEach(function(key) {
|
keys = key.split(".");
|
val = obj[key];
|
data = that.$data;
|
keys.forEach(function(key2, index) {
|
if (index + 1 == keys.length) {
|
that.$set(data, key2, val);
|
} else {
|
if (!data[key2]) {
|
that.$set(data, key2, {});
|
}
|
}
|
data = data[key2];
|
});
|
});
|
},
|
updateWeeks(weekIndex = -1) {
|
//console.log("updateWeeks weekIndex",weekIndex)
|
if (weekIndex < 0) {
|
if (this.currentSwiper == 1) {
|
weekIndex = this.to_week_index
|
} else if (this.currentSwiper == 2) {
|
weekIndex = this.to_next_week_index
|
} else {
|
weekIndex = this.to_prev_week_index
|
}
|
}
|
if (this.currentSwiper == 1) {
|
this.setData({
|
to_week_index: weekIndex,
|
weeks_prev: this.cale.weeks_prev,
|
weeks: this.cale.weeks,
|
weeks_next: this.cale.weeks_next,
|
})
|
} else if (this.currentSwiper == 2) {
|
this.setData({
|
to_next_week_index: weekIndex,
|
weeks_prev: this.cale.weeks_next,
|
weeks: this.cale.weeks_prev,
|
weeks_next: this.cale.weeks,
|
})
|
} else {
|
this.setData({
|
to_prev_week_index: weekIndex,
|
weeks_prev: this.cale.weeks,
|
weeks: this.cale.weeks_next,
|
weeks_next: this.cale.weeks_prev,
|
})
|
}
|
// console.log("updateWeeks weeks",this.cale.weeks)
|
// console.log("updateWeeks weeks_prev",this.cale.weeks_prev)
|
// console.log("updateWeeks weeks_next",this.cale.weeks_next)
|
},
|
updateWeek(weekIndex = -1) {
|
//console.log("updateWeek weekIndex",weekIndex)
|
if (weekIndex < 0) {
|
if (this.currentSwiper == 1) {
|
weekIndex = this.to_week_index
|
} else if (this.currentSwiper == 2) {
|
weekIndex = this.to_next_week_index
|
} else {
|
weekIndex = this.to_prev_week_index
|
}
|
}
|
|
if (this.retract) {
|
|
if (weekIndex < 0) {
|
if (this.currentSwiper == 1) {
|
weekIndex = this.to_week_index
|
} else if (this.currentSwiper == 2) {
|
weekIndex = this.to_next_week_index
|
} else {
|
weekIndex = this.to_prev_week_index
|
}
|
}
|
|
let prev_week_index = 1
|
let next_week_index = 1
|
let week = []
|
week = this.cale.weeks
|
let prev_week = []
|
prev_week = this.cale.weeks_prev
|
let next_week = []
|
next_week = this.cale.weeks_next
|
//console.log("updateWeek2 weekIndex",weekIndex,week.length)
|
if (weekIndex > 0) {
|
prev_week_index = weekIndex - 1
|
prev_week = this.cale.weeks
|
} else {
|
prev_week = this.cale.weeks_prev
|
let first = week[0][0]
|
let firstDay = this.cale.getDate(first.fullDate)
|
//console.log("updateWeek2 firstDay",firstDay)
|
//prev_week_index = this.weeks_prev_week.length -1
|
if (firstDay.date == 1)
|
prev_week_index = this.weeks_prev_week.length - 1
|
else
|
prev_week_index = this.weeks_prev_week.length - 2
|
}
|
if (weekIndex > week.length - 2) {
|
next_week = this.cale.weeks_next
|
let first = next_week[0][0]
|
let firstDay = this.cale.getDate(first.fullDate)
|
//console.log("updateWeek2 firstDay",firstDay)
|
//next_week_index =0
|
if (firstDay.date == 1)
|
next_week_index = 0
|
else
|
next_week_index = 1
|
} else {
|
next_week_index = weekIndex + 1
|
next_week = this.cale.weeks
|
}
|
|
if (this.currentSwiper == 1) {
|
this.to_week_index = weekIndex
|
this.to_prev_week_index = prev_week_index
|
this.to_next_week_index = next_week_index
|
this.weeks = week
|
this.weeks_prev_week = prev_week
|
this.weeks_next_week = next_week
|
} else if (this.currentSwiper == 2) {
|
this.to_next_week_index = weekIndex
|
this.to_week_index = prev_week_index
|
this.to_prev_week_index = next_week_index
|
this.weeks = prev_week
|
this.weeks_prev_week = next_week
|
this.weeks_next_week = week
|
} else {
|
this.to_prev_week_index = weekIndex
|
this.to_next_week_index = prev_week_index
|
this.to_week_index = next_week_index
|
this.weeks = next_week
|
this.weeks_prev_week = week
|
this.weeks_next_week = prev_week
|
}
|
//console.log("updateWeek3 weekIndex",weekIndex,prev_week_index,next_week_index)
|
} else {
|
if (this.currentSwiper == 1) {
|
this.to_week_index = weekIndex
|
} else if (this.currentSwiper == 2) {
|
this.to_next_week_index = weekIndex
|
} else {
|
this.to_prev_week_index = weekIndex
|
}
|
}
|
|
},
|
/**
|
* 初始化日期显示
|
* @param {Object} date
|
*/
|
init(date) {
|
this.cale.setDate(date)
|
this.nowDate = this.calendar = this.cale.getInfo(date)
|
|
let weekIndex = 0
|
let curDate = this.cale.date
|
//console.log("init nowDate:" , this.nowDate,curDate)
|
if (curDate.date > curDate.day + 1) {
|
let weekPos = (curDate.date - curDate.day - 1) % 7
|
if (weekPos > 0)
|
weekIndex = 1
|
weekIndex += (curDate.date - curDate.day - weekPos - 1) / 7
|
}
|
//console.log("init:" , weekIndex,this.retract)
|
this.updateWeeks(weekIndex)
|
this.updateWeek(weekIndex)
|
this.change()
|
//console.log("init2:" , this.to_prev_week_index)
|
},
|
/**
|
* 变化触发
|
*/
|
change() {
|
this.setEmit('change')
|
},
|
/**
|
* 选择月份触发
|
*/
|
monthSwitch() {
|
let {
|
year,
|
month
|
} = this.nowDate
|
this.$emit('monthSwitch', {
|
year,
|
month: Number(month)
|
})
|
},
|
/**
|
* 选择周触发
|
*/
|
weekSwitch() {
|
let {
|
year,
|
month,
|
date,
|
day
|
} = this.calendar
|
this.$emit('weekSwitch', {
|
year,
|
month: Number(month),
|
date: Number(date),
|
day
|
})
|
},
|
|
/**
|
* 派发事件
|
* @param {Object} name
|
*/
|
setEmit(name) {
|
let {
|
year,
|
month,
|
date,
|
fullDate,
|
lunar,
|
extraInfo
|
} = this.calendar
|
this.$emit(name, {
|
year,
|
month,
|
date,
|
fulldate: fullDate,
|
lunar,
|
extraInfo: extraInfo || {}
|
})
|
},
|
clickRetract() {
|
this.retract = !this.retract;
|
//console.log("clickRetract",this.retract)
|
if (this.retract) {
|
let weekIndex = 0
|
let curDate = this.cale.getDate(this.calendar.fullDate)
|
if (curDate.date > curDate.day + 1) {
|
let weekPos = (curDate.date - curDate.day - 1) % 7
|
if (weekPos > 0)
|
weekIndex = 1
|
weekIndex += (curDate.date - curDate.day - weekPos - 1) / 7
|
}
|
//console.log("clickRetract",curDate,weekIndex)
|
this.updateWeek(weekIndex)
|
} else
|
this.updateWeeks()
|
},
|
/**
|
* 选择天触发
|
* @param {Object} weeks
|
*/
|
choiceDate(weeks) {
|
if (weeks.disable) {
|
//console.log("choiceDate",weeks)
|
this.setDate(weeks.fullDate)
|
this.nowDate = this.calendar = this.cale.getInfo(weeks.fullDate)
|
this.monthSwitch()
|
let weekIndex = 0
|
let curDate = this.cale.getDate(weeks.fullDate)
|
//console.log("choiceDate2:",weeks)
|
if (curDate.date > curDate.day + 1) {
|
let weekPos = (curDate.date - curDate.day - 1) % 7
|
if (weekPos > 0)
|
weekIndex = 1
|
weekIndex += (curDate.date - curDate.day - weekPos - 1) / 7
|
}
|
//console.log("choiceDate weekIndex",weekIndex)
|
this.updateWeek(weekIndex)
|
this.change()
|
return;
|
}
|
//console.log("choiceDate:",weeks)
|
this.calendar = weeks
|
let weekIndex = 0
|
let curDate = this.cale.getDate(weeks.fullDate)
|
//console.log("choiceDate2:",weeks)
|
if (curDate.date > curDate.day + 1) {
|
let weekPos = (curDate.date - curDate.day - 1) % 7
|
if (weekPos > 0)
|
weekIndex = 1
|
weekIndex += (curDate.date - curDate.day - weekPos - 1) / 7
|
}
|
//console.log("choiceDate weekIndex",weekIndex)
|
this.updateWeek(weekIndex)
|
this.change()
|
/* if (weeks.disable){
|
console.log("choiceDate",weeks)
|
this.setDate(weeks.fullDate)
|
this.nowDate = this.calendar = this.cale.getInfo(weeks.fullDate)
|
this.monthSwitch()
|
this.change()
|
return;
|
}
|
console.log("choiceDate",weeks)
|
this.calendar = weeks
|
this.weeks = this.cale.weeks
|
this.change() */
|
},
|
/**
|
* 选择天触发
|
* @param {Object} days
|
* @param {Number} weekIndex
|
*/
|
clickDate(days, weekIndex) {
|
//console.log("choiceDate",days,weekIndex)
|
if (days.disable) {
|
//console.log("choiceDate",days)
|
this.setDate(days.fullDate)
|
this.nowDate = this.calendar = this.cale.getInfo(days.fullDate)
|
this.monthSwitch()
|
this.change()
|
return;
|
}
|
//console.log("choiceDate",days)
|
this.calendar = days
|
this.updateWeek(weekIndex)
|
this.change()
|
},
|
/**
|
* 回到今天
|
*/
|
backtoday() {
|
//console.log(this.cale.getDate(new Date()).fullDate);
|
let date = this.cale.getDate(new Date()).fullDate
|
// this.cale.setDate(date)
|
this.init(date)
|
this.monthSwitch()
|
},
|
/**
|
* 上个月
|
*/
|
prev() {
|
if (this.retract) {
|
let bChanged = false
|
if (this.currentSwiper == 1) {
|
if (this.to_week_index == 0)
|
bChanged = true
|
} else if (this.currentSwiper == 2) {
|
if (this.to_next_week_index == 0)
|
bChanged = true
|
} else {
|
if (this.to_prev_week_index == 0)
|
bChanged = true
|
}
|
let oldMonth = this.calendar.month
|
this.calendar = this.cale.getDate(this.calendar.fullDate, -7, 'day')
|
//console.log("prev Month",oldMonth,this.calendar )
|
if (oldMonth != this.calendar.month) {
|
const preDate = this.cale.getDate(this.nowDate.fullDate, -1, 'month').fullDate
|
//console.log("prev",preDate)
|
this.setDate(preDate)
|
this.monthSwitch()
|
} else
|
this.updateWeek()
|
this.change()
|
} else {
|
const preDate = this.cale.getDate(this.nowDate.fullDate, -1, 'month').fullDate
|
//console.log("prev",preDate)
|
this.setDate(preDate)
|
this.monthSwitch()
|
}
|
|
},
|
/**
|
* 下个月
|
*/
|
next() {
|
if (this.retract) {
|
let weekIndex = 0
|
if (this.currentSwiper == 1) {
|
|
weekIndex = this.to_week_index
|
} else if (this.currentSwiper == 2) {
|
weekIndex = this.to_next_week_index
|
} else {
|
weekIndex = this.to_prev_week_index
|
}
|
//console.log("next",weekIndex)
|
let lastCalendar = this.calendar
|
this.calendar = this.cale.getDate(this.calendar.fullDate, +7, 'day')
|
let firstDay = this.cale.getfirstday(this.calendar.fullDate)
|
if (lastCalendar.month != this.calendar.month) {
|
const nextDate = this.cale.getDate(this.nowDate.fullDate, +1, 'month').fullDate
|
//console.log("next",nextDate)
|
this.setDate(nextDate)
|
this.monthSwitch()
|
} else
|
this.updateWeek()
|
this.change()
|
} else {
|
const nextDate = this.cale.getDate(this.nowDate.fullDate, +1, 'month').fullDate
|
//console.log("next",nextDate)
|
this.setDate(nextDate)
|
this.monthSwitch()
|
}
|
},
|
/**
|
* 设置日期
|
* @param {Object} date
|
*/
|
setDate(date) {
|
|
this.cale.setDate(date)
|
let curDate = this.cale.date
|
this.nowDate = this.cale.getInfo(date)
|
//this.nowDate = this.calendar = this.cale.getInfo(date)
|
//this.calendar = this.nowDate
|
let curDate2 = this.cale.getDate(this.calendar.fullDate)
|
let weekIndex = 0
|
//console.log("setDate",this.nowDate,curDate,curDate2)
|
|
|
if (this.nowDate.year == curDate.year && curDate.month == this.nowDate.month) {
|
let curDate2 = curDate
|
if (curDate2.date > curDate2.day + 1) {
|
let weekPos = (curDate2.date - curDate2.day - 1) % 7
|
if (weekPos > 0)
|
weekIndex = 1
|
weekIndex += (curDate2.date - curDate2.day - weekPos - 1) / 7
|
}
|
//console.log("setDate2",weekIndex,curDate2)
|
if (this.retract) {
|
this.updateWeeks(weekIndex)
|
this.updateWeek()
|
} else {
|
this.updateWeeks()
|
}
|
this.calendar = curDate
|
this.change()
|
} else {
|
if (curDate2.date > curDate2.day + 1) {
|
let weekPos = (curDate2.date - curDate2.day - 1) % 7
|
if (weekPos > 0)
|
weekIndex = 1
|
weekIndex += (curDate2.date - curDate2.day - weekPos - 1) / 7
|
}
|
//console.log("setDate3",weekIndex,curDate2)
|
if (this.retract) {
|
this.calendar = this.cale.getfirstday(date)
|
weekIndex = 0
|
this.updateWeeks(weekIndex)
|
this.updateWeek()
|
|
} else {
|
this.updateWeeks()
|
this.calendar = this.cale.getfirstday(date)
|
}
|
this.change()
|
}
|
},
|
changeSwiper(evt) {
|
//console.log("changeSwiper1:",this.currentSwiper)
|
let current = evt.target.current || evt.detail.current;
|
let primary_current = this.currentSwiper
|
this.currentSwiper = current;
|
//console.log("changeSwiper2:",current)
|
if (primary_current - current == -1 || primary_current - current == 2) {
|
this.next()
|
} else {
|
this.prev()
|
}
|
/* if(index ==0 )
|
{
|
if(this.currentSwiper == 2)
|
{
|
this.next()
|
}
|
else{
|
this.prev()
|
}
|
}
|
else if(index ==2 )
|
{
|
if(this.currentSwiper == 0)
|
{
|
this.prev()
|
}
|
else{
|
this.next()
|
}
|
}
|
else{
|
|
if(this.currentSwiper < index)
|
{
|
this.next()
|
}
|
else
|
this.prev()
|
}
|
this.currentSwiper = index */
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.uni-calendar-date {
|
width: 100%;
|
display: flex;
|
position: relative;
|
flex-direction: column;
|
background-color: #fff;
|
|
.uni-panel-swiper {
|
margin: 0 auto;
|
position: relative;
|
width: 100%;
|
height: 100%;
|
z-index: 1
|
}
|
|
.uni-table-col {
|
display: flex;
|
flex-direction: column;
|
}
|
|
.uni-table-row {
|
position: relative;
|
width: 100%;
|
display: flex;
|
flex-direction: row;
|
}
|
|
.uni-calendar-weeks-item {
|
display: flex;
|
// flex: auto;
|
flex: 1;
|
justify-content: center;
|
align-items: center;
|
font-size: 32rpx;
|
}
|
|
.uni-calendar-weeks-day {
|
flex: 1;
|
display: flex;
|
/* flex-direction: column;
|
justify-content: center;
|
align-items: center; */
|
height: 100rpx;
|
/* border-bottom-color: #F5F5F5;
|
border-bottom-style: solid;
|
border-bottom-width: 1px; */
|
}
|
|
.uni-calendar-weeks-day-text {
|
font-size: 14px;
|
}
|
|
.uni-panel-calendar-arrow {
|
padding: 2px;
|
margin-left: 350rpx;
|
color: #808080;
|
transform: scale(2, 1);
|
}
|
|
.uni-panel-calendar-arrow2 {
|
transform: rotate(180deg) scale(2, 1);
|
}
|
}
|
</style>
|