tongli_WeChat/subPackages/hotelHomestay/selectCalendar.vue

<template>
	<div>

		<!--如果需要solt-->
		<!--用法二：当mode=2、3的模式下分别为（酒店\往返）的离开日期-->
		<Calendar class="custom-calendar" @click="tip" :is-show="true" :start-date="startDate" :end-date="endDate" mode="2" :title="'日期选择'"
			@callback="getDate" :transition="'slide'" :theme-color="'#515150'" />
		<div class="btn" @click="determine()">
			确定
		</div>
	</div>
</template>
<script>
	import Calendar from 'mobile-calendar-simple'
	export default {
		props: ['startDate', 'endDate'],
		data() {
			return { //日期均为yyyy-mm-dd或者yyyy/mm/dd格式
				betweenStart: '',
				betweenEnd: '',
				calendarShow: true,
				date: 'init', //判断是否选择了日期
			}
		},
		methods: {
			determine() {
				if (this.date == 'delete') {
					uni.showToast({
						title: "请选择日期",
						icon: "none"
					})
				} else if (this.date == 'init') {
					// 关闭弹框
					uni.$emit('changeHotelDate',null)
				} else {
					let date = this.date
					let data = {
						startDay: date.startStr.dateStr,
						endDay: date.endStr.dateStr,
						differDays: date.dayCount
					}
					uni.$emit('changeHotelDate',data)
				}
			},
			//获取回调的日期数据
			getDate(date) {
				this.date = date
			},
			tip() {
				console.log(1);
			}
		},
		components: {
			Calendar
		}
	}
</script>
<style scoped lang="scss">
	.btn {
		width: 697rpx;
		height: 80rpx;
		background: #C3282E;
		border-radius: 40rpx;
		line-height: 80rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		text-align: center;
		position: fixed;
		bottom: 30rpx;
		z-index: 999;
		text-align: center;
		left: 50%;
		transform: translate(-348.5rpx, 0);
	}
	
	/deep/ .custom-calendar {
		.calendar-tz{
			padding: 0 10rpx;
		}
		.tips {
			display: none;
		}
	}
	
</style>