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.
575 lines
29 KiB
575 lines
29 KiB
<!--
|
|
*calendarData.isShow:日历组件显示隐藏
|
|
*calendarData.yearStyle:设置年样式
|
|
*calendarData.monthStyle:设置月样式
|
|
*calendarData.dayStyle:设置日样式
|
|
*returnDate:已选日期回调方法，返回结果{time:'已选日期',timeType:'对应选择模块',isShow:'为了处理组件显示隐藏回调uniapp的坑'}
|
|
:status="checkStatus"
|
|
-->
|
|
<template>
|
|
<view :status="checkStatus" v-if="calendarData.isShow" class="lotus-calendar-wrap">
|
|
<view :class="calendarData.isShow?'lotus-calendar':'lotus-calendar lotus-calendar-out'">
|
|
<view class="lotus-calendar-title">选择日期</view>
|
|
<view class="lotus-calendar-cur-bg-month">{{curMonth+1}}</view>
|
|
<view class="lotus-calendar-cur-date">
|
|
<view class="lotus-calendar-center">
|
|
<view class="lotus-calendar-month">
|
|
<view class="lotus-calendar-prev" @tap="clickPrevMonth">←</view>
|
|
<view :style="calendarData.monthStyle" @tap="setStauts('showMonthFlag',true);" class="lotus-calendar-cur-text">{{showCurMonth}}月</view>
|
|
<view class="lotus-calendar-next" @tap="clickNextMonth">→</view>
|
|
</view>
|
|
<view class="lotus-calendar-year">
|
|
<view class="lotus-calendar-prev" @tap="clickPrevYear">←</view>
|
|
<view :style="calendarData.yearStyle" @tap="setStauts('showYearFlag',true);" class="lotus-calendar-cur-text">{{curYear}}</view>
|
|
<view class="lotus-calendar-next" @tap="clickNextYear">→</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="lotus-calendar-week">
|
|
<view class="lotus-calendar-week-text lotus-calendar-week-range" v-for="(item,index) in weekText" :key="index">
|
|
{{item}}
|
|
</view>
|
|
</view>
|
|
<view class="lotus-calendar-days">
|
|
<view class="lotus-calendar-days-text" v-for="(item,index) in totalDaysArr" :key="index" @tap="clickTargetTime(item,index)">
|
|
<view :class="item.flag?'lotus-calendar-days-act':'lotus-calendar-days-gray'" v-if="item.type == 0">{{item.day}}</view>
|
|
<view :class="item.flag?'lotus-calendar-days-act':''" v-if="item.type == 1">{{item.day}}</view>
|
|
<view :style="calendarData.dayStyle" :class="item.flag?'lotus-calendar-days-act':''" v-if="item.type == 2">{{item.day}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="lotus-calendar-result">
|
|
<view class="lotus-calendar-result-time" v-text="selectTime"></view>
|
|
<view class="lotus-calendar-result-btn" @tap="confirmFn">确定</view>
|
|
</view>
|
|
</view>
|
|
<!--月份选择-->
|
|
<view v-if="showMonthFlag" class="lotus-calendar-months">
|
|
<!-- <view class="lotus-calendar-months-cancel">
|
|
<image @tap="setStauts('showMonthFlag',false);" class="lotus-calendar-months-cancel-icon" src="data:image/png;base64,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" mode="aspectFit"></image>
|
|
</view> -->
|
|
<view class="lotus-calendar-months-box">
|
|
<view v-for="(item,index) in monthArray" :key="index" :style="item.flag&&calendarData.monthStyle" class="lotus-calendar-months-text">
|
|
<text @tap="setAct(item,'month');" v-text="item.monthText"></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!--年份份选择-->
|
|
<view v-if="showYearFlag" class="lotus-calendar-months">
|
|
<view class="lotus-calendar-year lotus-calendar-year2">
|
|
<view class="lotus-calendar-prev" @tap="yearRangeChanage(-10);">←</view>
|
|
<view :style="calendarData.yearStyle" @tap="setStauts('showYearFlag',true);" class="lotus-calendar-cur-text">{{curYear-10}}-{{curYear}}</view>
|
|
<view class="lotus-calendar-next" @tap="yearRangeChanage(+10);">→</view>
|
|
<!-- <view class="lotus-calendar-months-cancel lotus-calendar-months-cancel2">
|
|
<image @tap="setStauts('showYearFlag',false);" class="lotus-calendar-months-cancel-icon" src="data:image/png;base64,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" mode="aspectFit"></image>
|
|
</view> -->
|
|
</view>
|
|
<view style="padding-top:20rpx;" class="lotus-calendar-months-box">
|
|
<view v-for="(item,index) in yearArray" :key="index" :style="item.flag&&calendarData.monthStyle" class="lotus-calendar-months-text lotus-calendar-months-text2">
|
|
<text @tap="setAct(item,'year');" v-text="item.y"></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-if="calendarData.isShow" @tap="clickShowCalendar" class="lotus-calendar-mask"></view>
|
|
</view>
|
|
</template>
|
|
<style lang="less">
|
|
@import './Winglau14-lotusCalendar.css';
|
|
</style>
|
|
<script>
|
|
export default {
|
|
name: 'lotus-calendar',
|
|
props: ['calendarData'],
|
|
data () {
|
|
return {
|
|
isShow: true,
|
|
weekText: ['一', '二', '三', '四', '五', '六', '日'],
|
|
aMonth: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
|
|
showMonthFlag:false,
|
|
fullFlag:false,
|
|
monthArray:[{
|
|
monthText:'01月',
|
|
showCurMonth:'1',
|
|
flag:false
|
|
},{
|
|
monthText:'02月',
|
|
showCurMonth:'2',
|
|
flag:false
|
|
},{
|
|
monthText:'03月',
|
|
showCurMonth:'3',
|
|
flag:false
|
|
},{
|
|
monthText:'04月',
|
|
showCurMonth:'4',
|
|
flag:false
|
|
},{
|
|
monthText:'05月',
|
|
showCurMonth:'5',
|
|
flag:false
|
|
},{
|
|
monthText:'06月',
|
|
showCurMonth:'6',
|
|
flag:false
|
|
},{
|
|
monthText:'07月',
|
|
showCurMonth:'7',
|
|
flag:false
|
|
},{
|
|
monthText:'08月',
|
|
showCurMonth:'8',
|
|
flag:false
|
|
},{
|
|
monthText:'09月',
|
|
showCurMonth:'9',
|
|
flag:true
|
|
},{
|
|
monthText:'10月',
|
|
showCurMonth:'10',
|
|
flag:false
|
|
},{
|
|
monthText:'11月',
|
|
showCurMonth:'11',
|
|
flag:false
|
|
},{
|
|
monthText:'12月',
|
|
showCurMonth:'12',
|
|
flag:false
|
|
}],
|
|
yearArray:[],
|
|
showYearFlag:false,
|
|
curMonthDays: 0,//当前月天数
|
|
preMonthDays: 0,//上一个月天数
|
|
nextMonthDays: 0,//下一个月天数
|
|
totalDaysArr: [],//日历总天数
|
|
curYear: 0,//当前年份
|
|
curMonth: 0,//当前月份
|
|
curDate: 0,//当前日份
|
|
showCurMonth: 0,//显示日历中月份
|
|
choseIndex: 0,
|
|
choseCurTime: null,//每个日期obj有day/month/year
|
|
prevYear: '',//上一年
|
|
time:null,
|
|
returnType:'',
|
|
sTime:'',
|
|
eTime:'',
|
|
systemMonth:(new Date().getMonth()),//系统当前月份
|
|
parentDate:'',
|
|
actFlag:false,
|
|
savePreMonth:0,
|
|
savePreYear:0,
|
|
startYear:0,
|
|
endYear:0,
|
|
selectTime: ''
|
|
}
|
|
},
|
|
components: {},
|
|
computed:{
|
|
checkStatus(){
|
|
const _this = this;
|
|
const t = _this.calendarData.isShow;
|
|
_this.fullFlag = true;
|
|
if(t&&!_this.actFlag){
|
|
//获取父组件已选的时间值
|
|
_this.parentDate = _this.calendarData.choseTime.split('-');
|
|
_this.selectTime = _this.calendarData.choseTime;
|
|
_this.totalDaysArr = [];
|
|
//记录父组件的年份与月份的值，用于年月日比对上当前日期高亮
|
|
_this.savePreMonth = _this.parentDate[1]*1-1;
|
|
_this.savePreYear = _this.parentDate[0]*1;
|
|
//显示日历组件并生成对应数据
|
|
_this.show(_this.parentDate[0]*1,_this.parentDate[1]*1-1,_this.parentDate[2]*1);
|
|
}
|
|
return t;
|
|
}
|
|
},
|
|
methods: {
|
|
//点击上一月
|
|
clickPrevMonth(){
|
|
//console.log('prev'+this.curMonth);
|
|
this.totalDaysArr = [];
|
|
this.actFlag = true;
|
|
//缓存当前切换月份，用于当前日期高亮判断
|
|
const tMonth = this.curMonth;
|
|
this.savePreMonth = tMonth;
|
|
//判断点击到一月进入一年设置月份为12月
|
|
if (this.curMonth <= 0) {
|
|
this.curMonth = 11;
|
|
this.curYear--;
|
|
} else {
|
|
this.curMonth--;
|
|
}
|
|
//判断当前切换的月份是否与父组件传的月份一致，用于当前日期高亮
|
|
const pMonth = this.calendarData.choseTime.split('-')[1]*1-1;
|
|
if(this.curMonth === pMonth){
|
|
this.savePreMonth = pMonth;
|
|
}
|
|
//生成日历数据
|
|
this.createCalendarData(this.curYear, this.curMonth, this.curDate);
|
|
},
|
|
//点击下一月
|
|
clickNextMonth(){
|
|
this.totalDaysArr = [];
|
|
//缓存当前切换月份，用于当前日期高亮判断
|
|
const tMonth = this.curMonth;
|
|
this.savePreMonth = tMonth;
|
|
this.curMonth++;
|
|
this.actFlag = true;
|
|
//超过12月进入下一年判断设置月份为1月
|
|
if (this.curMonth >= 12) {
|
|
this.curMonth = 0;
|
|
this.curYear++;
|
|
}
|
|
//判断当前切换的月份是否与父组件传的月份一致，用于当前日期高亮
|
|
const pMonth = this.calendarData.choseTime.split('-')[1]*1-1;
|
|
if(this.curMonth === pMonth){
|
|
this.savePreMonth = pMonth;
|
|
}
|
|
//生成日历数据
|
|
this.createCalendarData(this.curYear, this.curMonth, this.curDate);
|
|
},
|
|
//点击上一年
|
|
clickPrevYear(){
|
|
this.prevYear = '';
|
|
this.totalDaysArr = [];
|
|
this.actFlag = true;
|
|
//缓存当前切换年份，用于当前日期高亮判断
|
|
const tYear = this.curYear;
|
|
this.savePreYear = tYear;
|
|
this.curYear--;
|
|
//判断当前切换的年份是否与父组件传的年份一致，用于当前日期高亮
|
|
const pYear = this.calendarData.choseTime.split('-')[0]*1;
|
|
if(this.curYear === pYear){
|
|
this.savePreYear = pYear;
|
|
}
|
|
//生成日历数据
|
|
this.createCalendarData(this.curYear, this.curMonth, this.curDate);
|
|
},
|
|
//点击下一年
|
|
clickNextYear(){
|
|
this.prevYear = '';
|
|
this.totalDaysArr = [];
|
|
//缓存当前切换年份，用于当前日期高亮判断
|
|
const tYear = this.curYear;
|
|
this.savePreYear = tYear;
|
|
this.curYear++;
|
|
this.actFlag = true;
|
|
//判断当前切换的年份是否与父组件传的年份一致，用于当前日期高亮
|
|
const pYear = this.calendarData.choseTime.split('-')[0]*1;
|
|
if(this.curYear === pYear){
|
|
this.savePreYear = pYear;
|
|
}
|
|
//生成日历数据
|
|
this.createCalendarData(this.curYear, this.curMonth, this.curDate);
|
|
},
|
|
//选中日期
|
|
clickTargetTime(curTime){
|
|
let objTime = curTime;
|
|
|
|
//历史日期不允许选择
|
|
let month=objTime.month+1<10?'0'+(objTime.month+1):objTime.month+1;
|
|
let day=objTime.day<10?'0'+objTime.day:objTime.day;
|
|
let rq=objTime.year+'-'+(month)+'-'+day;
|
|
let date=new Date(rq);
|
|
let date2=new Date(this.calendarData.Disablerq);
|
|
if(date.getTime()<date2.getTime()){
|
|
return;
|
|
}
|
|
//历史日期不允许选择
|
|
|
|
//遍历选中时间是否与当前时间一致，一致flag = true or flag = false;
|
|
this.totalDaysArr.map((item) => {
|
|
item.day === objTime.day && item.month === objTime.month ? item.flag = true : item.flag = false;
|
|
});
|
|
//为了不影响objTime这个数据源，定义一个临时obj
|
|
let tempObj = {};
|
|
//处理选中的时间
|
|
for (let i in objTime) {
|
|
if (i === 'day') {
|
|
tempObj.day = objTime[i];
|
|
tempObj.day = tempObj.day < 10 ? `0${tempObj.day}` : tempObj.day;
|
|
}
|
|
if (i === 'month') {
|
|
//选中时间跨入上一年12月份
|
|
tempObj.month = objTime[i];
|
|
if (objTime[i] < 0) {
|
|
tempObj.month = 12;
|
|
} else {
|
|
tempObj.month = tempObj.month + 1 < 10 ? `0${tempObj.month + 1}` : tempObj.month + 1;
|
|
}
|
|
}
|
|
if(i === 'year'){
|
|
tempObj.year = objTime[i];
|
|
}
|
|
}
|
|
|
|
this.choseCurTime = tempObj;
|
|
|
|
//判断选择时间跨入了下一年换算当前月份
|
|
if (this.choseCurTime.month > 12) {
|
|
this.choseCurTime.month = this.choseCurTime.month - 12 < 10 ? `0${this.choseCurTime.month - 12}` : this.choseCurTime.month - 12;
|
|
}
|
|
this.calendarData.isShow = false;
|
|
//用于computed计算标识不然函数会再次执行
|
|
this.actFlag = false;
|
|
this.calendarData.choseTime = `${this.choseCurTime.year}-${this.choseCurTime.month}-${this.choseCurTime.day}`;
|
|
this.selectTime = this.calendarData.choseTime;
|
|
//传值给父组件
|
|
// this.$emit('returnDate',{time:`${this.choseCurTime.year}-${this.choseCurTime.month}-${this.choseCurTime.day}`,timeType:this.calendarData.type,isShow:false});
|
|
},
|
|
//显示与隐藏日历
|
|
clickShowCalendar(){
|
|
this.showMonthFlag = false;
|
|
this.showYearFlag = false;
|
|
this.actFlag = false;
|
|
this.$emit('closeCalendar',{
|
|
time: this.selectTime,
|
|
isShow: false
|
|
});
|
|
},
|
|
//显示
|
|
show(curYear,curMonth,curDate) {
|
|
this.returnType = this.calendarData.type;
|
|
this.totalDaysArr = [];
|
|
const objDate = new Date();
|
|
//当前年份
|
|
this.curYear = curYear||objDate.getFullYear();
|
|
//当前月份
|
|
if(curMonth === 0 || curMonth){
|
|
this.curMonth = curMonth;
|
|
}else{
|
|
this.curMonth = objDate.getMonth();
|
|
}
|
|
//当前几号
|
|
this.curDate = curDate||objDate.getDate();
|
|
//生成对应年份区间列表数据
|
|
this.crateYearRange();
|
|
//生成日历数据
|
|
this.createCalendarData(this.curYear, this.curMonth, this.curDate);
|
|
},
|
|
//方法调用
|
|
lotusCalendar() {
|
|
this.show();
|
|
},
|
|
//是否为闰年
|
|
isLeapYear(year) {
|
|
return ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0);
|
|
},
|
|
//获取当前月份天数
|
|
getCurMonthDays(year, month) {
|
|
//console.log(year, month);
|
|
if (this.isLeapYear(year)) {
|
|
//判断当前月份是2月
|
|
if (this.curMonth === 1&&this.curMonth === month) {
|
|
return this.aMonth[1] = 29;
|
|
}else {
|
|
return this.aMonth[month];
|
|
}
|
|
} else {
|
|
//不是闰年重置2月天数为28
|
|
this.aMonth[1] = 28;
|
|
return this.aMonth[month];
|
|
}
|
|
},
|
|
//自动补0
|
|
autoPatchZero(val) {
|
|
return val < 10 ? `0${val}` : val;
|
|
},
|
|
//生成日历数据 curYear年份 curMonth月份 curDate号数
|
|
createCalendarData(curYear, curMonth, curDate) {
|
|
//换算当前月份自动补全 val < 10 ? `0${val}` : val;
|
|
this.showCurMonth = curMonth;
|
|
this.showCurMonth = this.autoPatchZero(this.showCurMonth + 1);
|
|
let preYear = '';
|
|
//当前月份1号星期几
|
|
let iWeek = new Date(curYear, curMonth, 1).getDay();
|
|
if (iWeek === 0) {
|
|
iWeek = 7;
|
|
}
|
|
if (curMonth === 0) {
|
|
const t = 12;
|
|
preYear = curYear;
|
|
preYear -= 1;
|
|
this.prevYear = preYear;
|
|
//上一个月份共多少天
|
|
this.preMonthDays = this.getCurMonthDays(preYear, t - 1);
|
|
} else {
|
|
//上一个月份共多少天
|
|
this.preMonthDays = this.getCurMonthDays(curYear, curMonth - 1);
|
|
}
|
|
//当前月份共多少天
|
|
this.curMonthDays = this.getCurMonthDays(curYear, curMonth);
|
|
//下一个月份共多少天
|
|
this.nextMonthDays = this.getCurMonthDays(curYear, curMonth + 1);
|
|
//上一个月剩下几天
|
|
for (let i = iWeek - 2; i >= 0; i--) {
|
|
const obj = {
|
|
day: this.preMonthDays - i,
|
|
className: 'gray',
|
|
type: 0,
|
|
flag: false,
|
|
month: curMonth - 1,
|
|
year: preYear ? preYear : curYear
|
|
};
|
|
this.totalDaysArr.push(obj);
|
|
}
|
|
|
|
//当前月份天数
|
|
for (let i = 1; i <= this.curMonthDays; i++) {
|
|
const obj = {
|
|
day: i,
|
|
type: 1,
|
|
flag: false,
|
|
className: '',
|
|
month: curMonth,
|
|
year: curYear
|
|
};
|
|
if (i === curDate && curMonth === this.savePreMonth&& curYear === this.savePreYear) {
|
|
obj.flag = true;
|
|
obj.className = 'act';
|
|
obj.type = 2;
|
|
}
|
|
//历史日期不允许选择
|
|
let month=curMonth+1<10?'0'+(curMonth+1):curMonth+1;
|
|
let day=i<10?'0'+i:i;
|
|
let rq=curYear+'-'+(month)+'-'+day;
|
|
let date=new Date(rq);
|
|
let date2=new Date(this.calendarData.Disablerq);
|
|
if(date.getTime()<date2.getTime()){
|
|
obj.flag = false;
|
|
obj.className = 'gray';
|
|
obj.type = 0;
|
|
}
|
|
//历史日期不允许选择
|
|
this.totalDaysArr.push(obj);
|
|
}
|
|
|
|
//下一个月开始的几天
|
|
const leaveLength = 42 - this.totalDaysArr.length;
|
|
for (let i = 1; i <= leaveLength; i++) {
|
|
const obj = {
|
|
day: i,
|
|
className: '',
|
|
type: 1,
|
|
flag: false,
|
|
month: curMonth + 1,
|
|
year: curYear
|
|
};
|
|
//点击月份进入了下一年
|
|
if(obj.month >= 12){
|
|
obj.year += 1
|
|
}
|
|
//历史日期不允许选择
|
|
let month=curMonth+2<10?'0'+(curMonth+2):curMonth+2;
|
|
let day=obj.day<10?'0'+obj.day:obj.day;
|
|
let rq=obj.year+'-'+(month)+'-'+day;
|
|
let date=new Date(rq);
|
|
let date2=new Date(this.calendarData.Disablerq);
|
|
if(date.getTime()<date2.getTime()){
|
|
obj.flag = false;
|
|
obj.className = 'gray';
|
|
obj.type = 0;
|
|
}
|
|
//历史日期不允许选择
|
|
this.totalDaysArr.push(obj);
|
|
}
|
|
},
|
|
//月份/年份设置高亮
|
|
setAct(obj,type){
|
|
if(type === "month"){
|
|
this.monthArray.map((item,index)=>{
|
|
item.flag = false;
|
|
});
|
|
this.curMonth = obj.showCurMonth*1-1;
|
|
this.setStauts('showMonthFlag',false);
|
|
}else{
|
|
this.yearArray.map((item,index)=>{
|
|
item.flag = false;
|
|
});
|
|
this.setStauts('showYearFlag',false);
|
|
this.curYear = obj.y;
|
|
}
|
|
obj.flag = true;
|
|
this.totalDaysArr = [];
|
|
this.createCalendarData(this.curYear,this.curMonth,this.curDate);
|
|
this.selectTime = `${this.curYear}-${this.curMonth+1<10?'0'+(this.curMonth+1):(this.curMonth+1)}-${this.curDate<10?'0'+this.curDate:this.curDate}`
|
|
this.actFlag = true;
|
|
this.fullFlag = true;
|
|
},
|
|
//更改状态
|
|
setStauts(type,obj){
|
|
//月份选中
|
|
if(type === "showMonthFlag" && obj){
|
|
this.monthArray.map((item,index)=>{
|
|
item.flag = false;
|
|
if(item.showCurMonth*1-1 === this.curMonth){
|
|
item.flag = true;
|
|
}
|
|
});
|
|
}else{
|
|
//年份选中
|
|
this.yearArray.map((item,index)=>{
|
|
item.flag = false;
|
|
if(item.y === this.curYear){
|
|
item.flag = true;
|
|
}
|
|
});
|
|
}
|
|
this[type] = obj;
|
|
this.fullFlag = false;
|
|
},
|
|
//年份区间数据创建
|
|
crateYearRange(year){
|
|
this.yearArray = [];
|
|
this.startYear = this.curYear-15;
|
|
this.endYear = this.curYear+5;
|
|
this.actFlag = true;
|
|
for(let i = this.startYear+1;i<this.startYear+15;i++){
|
|
let sObj = {
|
|
y:i,
|
|
flag:false
|
|
}
|
|
//判断切换年份是否与之前年份一致&高亮
|
|
if(i === this.savePreYear){
|
|
sObj.flag = true;
|
|
}
|
|
this.yearArray.push(sObj);
|
|
}
|
|
for(let j = this.curYear;j<=this.curYear+5;j++){
|
|
let eObj = {
|
|
y:j,
|
|
flag:false
|
|
}
|
|
//判断切换年份是否与之前年份一致&高亮
|
|
if(j === this.savePreYear){
|
|
eObj.flag = true;
|
|
}
|
|
this.yearArray.push(eObj);
|
|
}
|
|
},
|
|
//年份区间变化
|
|
yearRangeChanage(type){
|
|
this.curYear += type;
|
|
this.crateYearRange();
|
|
},
|
|
// 点击确定按钮
|
|
confirmFn(){
|
|
this.showMonthFlag = false;
|
|
this.showYearFlag = false;
|
|
this.actFlag = false;
|
|
let option = {
|
|
isShow: false
|
|
}
|
|
if(this.choseCurTime){
|
|
option.time = `${this.choseCurTime.year}-${this.choseCurTime.month}-${this.choseCurTime.day}`;
|
|
option.timeType = this.calendarData.type?this.calendarData.type:'';
|
|
}
|
|
if(this.selectTime){
|
|
option.time = this.selectTime;
|
|
}
|
|
this.$emit('returnDate',{
|
|
...option,
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|