关于uni-app里使用uni-calendar的弹出模式时时间不可选择的处理

关于uni-app里使用uni-calendar的弹出模式时时间不可选择的处理，还设置了日历可选择的有限时间和选择时的文字标注

关于uni-app里使用uni-calendar的弹出模式时时间不可选择的处理

最近在开发智慧公寓移动端时时需要有使用日历选择订房日期的功能，uni-calendar里有插入模式和弹出模式，我需要弹出模式的样式，但是将insert为false时弹出的日历不能选择，要选择必须改为true，后面我终于想到将日历改为插入模式放入弹窗中，通过点击时间出现弹窗和日历，我还设置了日历可选择的有限时间和选择时的文字标注

设置点击位置

写好点击出现弹窗的样式并将日历放到uni-popup中弹出

		<view class="select-time" @click="openCalendar">
			<view class="select-time-one">
			  <text class="select-list">周四入住</text>
			  <text class="select-list-time">07月21日</text>
			</view>
			<view class="select-center">
				<view class="select-line1"></view>
				<view class="select-circle">1晚</view>
				<view class="select-line2"></view>
			</view>
			<view class="select-time-one">
			  <text class="select-list">周五离店</text>
			  <text class="select-list-time">07月22日</text>
			</view>
		</view>
		<uni-popup ref="popup_picker" :mask-click="true">
			<view class=popup_bg_picker>
			<uni-calendar :selected="info.selected" class="uni-calendar--hook" :clear-date="true" :date="info.date" :insert="info.insert" :lunar="info.lunar" :startDate="info.startDate"
			:endDate="info.endDate" :range="info.range" @change="change"/>
			</view>
		</uni-popup>

样式为

点击事件为，并给前后点击日期写好标注

// 日期选择器弹窗开启
			openCalendar() {
				this.$refs.popup_picker.open()
			},
			change(e) {
				console.log('1change 返回:', e)
				// 模拟动态打卡
				if (this.info.selected.length > 5) return
				this.info.selected.push({
					date: e.range.before,
					info: '到店'
				})
				this.info.selected.push({
					date: e.range.after,
					info: '离店'
				})
			},

可打开日历

需要给日历里选择的日期固定为7天内并标注选择文字
//data中定义

return {
				showCalendar: false,
				info: {
					lunar: true,
					range: true,
					insert: true,
					selected: [],
					startDate:'',
					date:'',
					endDate:''
				},
		}

设置选择的开始时间结束时间和当前默认时间

onReady() {
			this.$nextTick(() => {
				this.showCalendar = true
			})
			// TODO 模拟请求异步同步数据
			setTimeout(() => {
				this.info.date = getDate(new Date()).fullDate
				this.info.startDate = getDate(new Date()).fullDate
				this.info.endDate =  getDate(new Date(),6).fullDate
			}, 2000)
	}

这样就有一个完整点击出现日历样式了，并可标注好提示文字