uniapp酒店入住日期选择组件

更新可以选择一个或者两个日期，根据type//1选一天，2选两天范围，代码优化了。

话不多说先上代码，分三部分html、js、style。

<template><view class="mask-date" @touchmove.stop.prevent="moveHandle" :hidden="isshowDatemodal" ><view  class="modal-date"><view class="title">{{title}}<view @click="closeDateBtn" class="closedate">X</view> </view><view class="timetitle"><view class="text">时间</view><picker-view  @change="selectTimeBtn" class="selectime"  :value="value"  ><picker-view-column><view class="item"  v-for="(item,index) in timearr" :key="index" >{{item}}</view></picker-view-column></picker-view ></view><view class="date"><view class="datecycle"><view class="lic" v-for="(item,index) in dateCycle" :key="index">{{item}}</view></view><scroll-view v-if="DateData.ymarr&&DateData.ymarr.length>0" scroll-y="true" class="wrapdate" style="height:56vw;"><view v-for="(ymarr,index_y) in DateData.ymarr" :key="index_y"><view class="year_m">{{ymarr.ym}}</view><view class="daily"><block v-if="index_y>=1||DateData.today<=(7-ymarr.firstDay)"><view v-for="(item,index) in DateData.ymarr[index_y].firstDay" :key="ymarr+item"  class="li_none"  >{{item}}</view></block><view v-for="(item,index) in ymarr.dateArr" :key="index" @click="selectDateBtn([item,ymarr.year,ymarr.month])"  class="lid"><view :class="[selectedCss(item,ymarr),item<DateData.today&&index_y==0?'lin':'']">{{item}}</view>	</view></view></view></scroll-view></view><view class="ulbtn"><view class="lil" @click="nowDateBtn" >即时入住</view><view class="lir" @click="ortherDateBtn" >{{confirmText}}</view></view></view></view>
</template>

JS

computed:{selectedCss(){return (item,ymarr)=>{let select=`${ymarr.year}-${ymarr.month}-${item}`if(this.type==1){let {selectyear,selectmonth,selectday}=this.DateDatalet select2=`${selectyear}-${selectmonth}-${selectday}`return select==select2?'lid_s':''}let select2=this.selectDateList[0]let select3=this.selectDateList[1]return select==select2||select3==select?'lid_s':''}},},props:{confirmText:{type: String,default: '确认日期'},type:{type: Number,default: 2,//1选一天，2选两天范围},title:{type: String,default: '入住日期及时间'},isshowDatemodal:{type: Boolean,default: true},//需要显示的月数monthNum:{  type: Number,default: 1,}},data() {return {timearr:[],value:[0],DateData:{},selectDateList:[],//两个日期selectTime:"00:00",dateCycle: ['周日', '周一', '周二', '周三', '周四', '周五', '周六']};},created:function(e){this.initData()},methods:{moveHandle(){return false},// 初始化数据initData(){let timearr = []for(let i = 0; i< 24; i++) {timearr.push(`${i<10?`0${i}`:i}:00`)timearr.push(`${i<10?`0${i}`:i}:30`)}this.timearr=timearrthis.DateData=this.GetDateMonthDay(new Date(),this.monthNum-1)let nowTime=this.getNowTimes()this.selectTime=nowTimefor(let i in timearr){if(timearr[i]==nowTime){this.value=[parseInt(i)]break;}}},//时间选择selectTimeBtn(e){let time=this.timearr[e.detail.value[0]]this.selectTime=time},//日期选择selectDateBtn(e) {let _day =e[0],_year=e[1],_month=e[2];let newDateData=this.DateDataif (_day < newDateData.today&&newDateData.ymarr[0].month==_month) {return }//选一天if(this.type==1){newDateData.selectyear=_yearnewDateData.selectmonth=_monthnewDateData.selectday=_daythis.DateData=newDateDatareturn}let sel=`${_year}-${_month}-${_day}`let index=this.selectDateList.indexOf(sel)if(index>-1){this.selectDateList.splice(index,1)return}if(!this.selectDateList[0]){this.$set(this.selectDateList,0,sel)return}if(!this.selectDateList[1]){this.$set(this.selectDateList,1,sel)return}if(this.selectDateList.length<2){this.selectDateList.push(sel)return}if(this.selectDateList.length==2){this.$set(this.selectDateList,1,sel)}},//即时入住 nowDateBtn(e){//console.log(this.data.DateData.selectdate)let times = this.getNowTimes()let datetime = this.DateData.selectdateif(this.type==1){this.$emit("ortherdatebtn",{datetime,times})}else{this.$emit("ortherdatebtn",{selectDateList:[this.DateData.selectdate],times})}},//确认日期ortherDateBtn(e) {let date=this.DateDatalet selectTime=this.selectTimelet datetime=date.selectyear + "年" + date.selectmonth + "月" + date.selectday + "日 "let times=selectTime// console.log({datetime,times})if(this.type==1){this.$emit("ortherdatebtn",{datetime,times})}else{this.$emit("ortherdatebtn",{selectDateList:this.selectDateList,times})}},//关闭弹窗closeDateBtn(){this.$emit("closedate")},getDateDetail(mydate){let year = mydate.getFullYear();let month = mydate.getMonth();let _year = year;let _month = month + 1;let today = mydate.getDate();let fist = new Date(year, month, 1);let firstDay = fist.getDay();let last = new Date(year, _month, 0);let lastDay = last.getDate();let dateArr = []for (let i = 1; i < lastDay + 1; i++) {dateArr.push(i<10?`0${i}`:i);}if(_month<10){_month=`0${_month}`}return {_year,_month,dateArr,today,lastDay,firstDay}},GetDateMonthDay:function(mydate,num) { //获取当月日期,mydate为当月日期，num为需要几个月的日期let {_year,_month,dateArr,today,lastDay,firstDay}=this.getDateDetail(mydate)let dd = 7 - firstDayif (today > dd) {let n = Math.floor((today - dd) / 7)if ((today - dd) % 7 == 0) {n = n - 1}dateArr = dateArr.slice((n * 7) + dd)}let ym= _year + "年" + _month + "月"let themonth = {}themonth.ym=ymthemonth.dateArr=dateArrthemonth.firstDay=firstDaythemonth.month=_monththemonth.year=_yearlet thedatedata = { }thedatedata.ymarr=[themonth]thedatedata.today=todaythedatedata.selectday=todaythedatedata.selectmonth=_monththedatedata.selectyear=_yearthedatedata.selectdate=ym + today + "日" for(let i=0;i<num;i++){mydate.setMonth(mydate.getMonth()+1,1)thedatedata.ymarr.push(this.GetnextMonth(mydate))}return thedatedata},GetnextMonth:function(mydate) { //获取下一月日期let {_year,_month,dateArr,today,lastDay,firstDay}=this.getDateDetail(mydate)let month_day = {}month_day.ym= _year + "年" + _month + "月";month_day.dateArr=dateArrmonth_day.firstDay=firstDaymonth_day.month=_monthmonth_day.year=_yearreturn month_day;},//计算当前时间点getNowTimes:function() {let now = new Date();// let currenttime = now.toLocaleTimeString('chinese', { hour12: false });let hours = now.getHours()let minutes = now.getMinutes()hours += 1hours=hours==24?0:hoursif (minutes < 30) {return hours + ":00"}return hours + ":30"}},}

style

.mask-date{position: fixed;top: 0; display: flex;align-items: center;justify-content: center;  left: 0;width: 100%;height: 100%;background: rgba(128, 127, 127, 0.9);z-index: 9;.modal-date{width: 90vw; background: #fff;z-index:99;border-radius: 2vw; overflow: hidden;}.title{font-size:4vw;background: #fbbe0e;color: #fff;text-align: center;line-height: 8vw;position: relative;border-top-left-radius: 1vw;border-top-right-radius: 1vw; }	.closedate{position: absolute;top:1vw;right: 1vw;color: #7a7a7a;background: #fff;border-radius: 100%;width: 6vw;height: 6vw;text-align: center;line-height: 6vw;font-size: 3.6vw;}.timetitle{display: flex;align-items: center; justify-content: space-between; padding: 0 3vw;line-height: 8vw;.text{font-size: 3.8vw;font-weight: bold;line-height: 8vw;}}.selectime{height: 10vw;width: 40vw;}.selectime .item{width: 100%;line-height: 9vw;text-align: center;color: #fbbe0e;}.date{width: 100%;}.datecycle{display: flex;width:100%;box-sizing: border-box;  padding:1vw 3vw;margin: 0 auto; font-size: 4vw;text-align: center;}.datecycle .lic{line-height:8vw;flex:1;}.wrapdate{padding: 0 3vw;box-sizing: border-box;position: relative;}.year_m{ position: sticky; left: 0;top: 0;z-index: 1;background-color: #FFFFFF; line-height: 8vw;font-weight: bold;font-size: 3.8vw;}.daily{width: 100%; display: flex;flex-wrap: wrap; margin:0 auto;text-align: center; }.lid{font-size: 3.4vw; width: 14.2%;text-align: center;line-height:8vw;border-radius: 100%;}.lid_s{color: #FFFFFF; margin: 0 auto; background-color: #fbbe0e;text-align: center;width: 7vw;height: 7vw;line-height:7vw;border-radius: 100%;}.li_none{color: #FFFFFF; background-color: #FFFFFF;width: 14.2%;text-align: center;padding-bottom: 10upx;line-height:50upx;border-radius: 100%;}.lin{color: #FFFFFF;display: none;}.ulbtn{background: #fff;border-top: 2upx #d9d9d9 solid; display: flex;text-align: center;font-size:4vw;width: 100%;padding: 0 1vw;box-sizing: border-box;.lil{flex: 1;border-right: 2upx #d9d9d9 solid;color: #00d4fa;height:8vw;padding: 2vw 0;line-height: 8vw;}.lir{flex: 1;color: #fbbe0f;height: 8vw;padding: 2vw 0;line-height: 8vw;}}}

实现方法很简单,一看就能懂，调用方法简单。

//引入一下
import mycalendar from '../../../components/MyCalendar.vue'//调用组件
<mycalendar @closedate="closedate" @ortherdatebtn="ortherDateBtn" :monthNum="2" :isshowDatemodal="isshowDatemodal" />//事件传参
ortherDateBtn(e){console.log(e);},closedate(){this.isshowDatemodal=true}