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.DateData
						let 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=timearr
		    		this.DateData=this.GetDateMonthDay(new Date(),this.monthNum-1)
		    		let nowTime=this.getNowTimes()
		    		this.selectTime=nowTime
					for(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.DateData
			      if (_day < newDateData.today&&newDateData.ymarr[0].month==_month) {return }
						//选一天
						if(this.type==1){
							newDateData.selectyear=_year
							newDateData.selectmonth=_month
							newDateData.selectday=_day
							this.DateData=newDateData
							return
						}
						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.selectdate
			     if(this.type==1){
			     	this.$emit("ortherdatebtn",{datetime,times})
			     }
			     else{
			     	this.$emit("ortherdatebtn",{selectDateList:[this.DateData.selectdate],times})
			     }
			    },
			    //确认日期
			    ortherDateBtn(e) {
			      let date=this.DateData
			      let selectTime=this.selectTime
				  let 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 - firstDay
			  if (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=ym
			  themonth.dateArr=dateArr
			  themonth.firstDay=firstDay
			  themonth.month=_month
			  themonth.year=_year
			  let thedatedata = { }
			  thedatedata.ymarr=[themonth]
			  thedatedata.today=today
			  thedatedata.selectday=today
			  thedatedata.selectmonth=_month
			  thedatedata.selectyear=_year
			  thedatedata.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=dateArr
			  month_day.firstDay=firstDay
			  month_day.month=_month
			  month_day.year=_year
			  return month_day;
			},
			//计算当前时间点
			 getNowTimes:function() {
			  let now = new Date();
			  // let currenttime = now.toLocaleTimeString('chinese', { hour12: false });
			  let hours = now.getHours()
			  let minutes = now.getMinutes()
			  hours += 1
			  hours=hours==24?0:hours
			  if (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
			}