|
|
<!--*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>
|
