https://blog.csdn.net/qq_22718203/article/details/103505339
调接口，返回的是一个日历的数组，拿这些数据，去渲染日历
<view class="tac bg_ffffff">
<view class="week fz28 padtb20 border_bot" id="week">
<view :class="[idx===0||idx===6 ? 'relax':'','week-item']" v-for="(item,idx) inweek_list" :key="idx">{{item}}
<scroll-view :scroll-y="true" style="height:70vh">
<view class="month-block fz28" v-for="(canlendar_item,index) in canlendar_data" :key="index">
<view class="fz28 bg_eeeeee tac lh60">{{canlendar_item[0].title}}
<view class="month-content">
<view :class="[ item.valid==1 ? '':'color_999','month-day',in_date===item.date?'startActive':'',out_date===item.date? 'startActive':'',in_date
:data-available="item.valid" :data-fulldate="item.date" v-for="(item,dd) in canlendar_item" :key="item.date">
{{item.day ? item.day : ''}}
<block v-if="item.price>0">
<view :class="[item.valid==1 ? '' : 'color_999','lh26 fz20']">{{RMB}}{{item.price}}
<view class="fz20" style="height: 36rpx;line-height: 36rpx;">
<block v-if="in_date===item.date">
{{in_date===item.date ? '入住' : ''}}
<block v-if="out_date===item.date">
{{out_date===item.date ? '离店' : ''}}
import httpsfrom '@/utils/common';
const {RMB,get}=https;
import {imgObj}from '@/utils/imgs';
export default {
props: ['canlendar_data','all_unvalid','checkdate'],
data () {
return {
RMB:RMB,
imgObj:imgObj,
week_list: ['日','一','二','三','四','五','六'],
in_date:'',//选择的日期
out_date:''
}
},
mounted(){
let {check_date}=this.$store.state;
if(check_date.check_in && check_date.check_in.length>0){
this.in_date=check_date.check_in[0]+'-'+check_date.check_in[1]+'-'+check_date.check_in[2];
this.out_date=check_date.check_out[0]+'-'+check_date.check_out[1]+'-'+check_date.check_out[2]
}
},
watch:{
checkdate(newval,oldval){
let check_date=newval;
if(check_date.check_in && check_date.check_in.length>0){
this.in_date=check_date.check_in[0]+'-'+check_date.check_in[1]+'-'+check_date.check_in[2];
this.out_date=check_date.check_out[0]+'-'+check_date.check_out[1]+'-'+check_date.check_out[2]
}
}
},
methods:{
getAllTime(starDay, endDay){
var arr = [];
var dates = [];
// 设置两个日期UTC时间
var db =new Date(starDay);
var de =new Date(endDay);
// 获取两个日期GTM时间
var s = db.getTime() -24 *60 *60 *1000;
var d = de.getTime() -24 *60 *60 *1000;
// 获取到两个日期之间的每一天的毫秒数
for (var i = s; i <= d;) {
i = i +24 *60 *60 *1000;
arr.push(parseInt(i))
}
// 获取每一天的时间 YY-MM-DD
for(var jin arr ){
var time =new Date(arr[j]);
var year = time.getFullYear(time);
var mouth = (time.getMonth() +1)>=10?(time.getMonth() +1):('0'+(time.getMonth() +1));
var day = time.getDate()>=10?time.getDate():('0'+time.getDate());
var YYMMDD = year +'-' + mouth +'-' + day;
dates.push(YYMMDD)
}
return dates
},
chooseDate(e) {
//this.validAll();
const available = e.currentTarget.dataset.available;
const fullDate = e.currentTarget.dataset.fulldate;
let inTime=this.in_date,outTime=this.out_date;
if(available==1) {
if (inTime =='' || (new Date(fullDate) <=new Date(inTime)) || outTime !='') {//选择开始时间
this.in_date=fullDate;
this.out_date='';
}else{//选择结束时间
let arr=this.getAllTime(this.in_date,fullDate),flag=false;
for(let j=0;j
if(this.all_unvalid.includes(arr[j])){
flag=true
}
}
if(flag){//判断中间是否，有满房
wx.showToast({
title:'中间有不可选日期！',
icon:'none',
duration:2000
})
this.in_date='';
this.out_date='';
}else{
this.out_date=fullDate;
this.$emit('select',inTime,fullDate);
}
}
}else{
return false;
}
},
}
}
@import "../styles/freecalendar.less";
.lh26{line-height:26rpx;}
.range_bg{background:#FFF9F2;}
</style>
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
createhotel.vue 页面
getFirstDayOfMonth(year,month) {
return new Date(year, month -1, 1).getDay();
},
getEmptyGrids(year,month) {
// FirstDayOfMonth代表本月的第一天是星期几
const FirstDayOfMonth =this.getFirstDayOfMonth(year, month);
let emptyGrids = [];
// 有空格的情况
if (FirstDayOfMonth >0) {
for (let i =0; i < FirstDayOfMonth; i++) {
emptyGrids.push({
'title': year+'年'+month+'月',
'fullDate':'x' //x是我自己定义的一个值，代表没有日期
});
}
// 将空格放入数组
return emptyGrids;
}else{
// 否则返回一个新数组
return [];
}
},
fillCalendar(n) {
let canlendar_data = [];
for (let i =0; i < n; i++) {
let peryear=cale_origin[i][0].date.slice(0,4),permonty=cale_origin[i][0].date.slice(5,7);
let EmptyGrids =this.getEmptyGrids(peryear, permonty);
let item=cale_origin[i];
let brr=EmptyGrids
for(let j=0;j
let theitem=cale_origin[i][j];
theitem.title=peryear+'年'+permonty+'月';
theitem.day=theitem.date.slice(8);
brr.push(cale_origin[i][j])
}
canlendar_data.push(brr);
//console.log(canlendar_data);
}
this.canlendar_data=canlendar_data;
},
