flavorOfTimeSz/components/selectCalendarCom.vue

<template>
	<div>

		<!--如果需要solt-->
		<!--用法二：当mode=2、3的模式下分别为（酒店\往返）的离开日期-->
		<Calendar @click="tip" :is-show="true" :start-date="startDate" :end-date="endDate" mode="2" :title="'日期选择'"
			@callback="getDate" :transition="'slide'" :theme-color="'#6A8A27'" />
		<div class="btn" @click="determine()">
			确定
		</div>
	</div>
</template>
<script>
	import Calendar from 'mobile-calendar-simple'
	export default {
		name: 'selectCalendarCom',
		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') {
					// 关闭弹框
					let data = null
					if (this.startDate && this.endDate) {
						data =  {
							startDay: this.startDate,
							endDay: this.endDate,
							differDays: 1
						}
					}
					this.$emit('changeHotelDate',data)
				} else {
					let date = this.date
					let data = {
						startDay: date.startStr.dateStr,
						endDay: date.endStr.dateStr,
						differDays: date.dayCount
					}
					this.$emit('changeHotelDate',data)
				}
			},
			//获取回调的日期数据
			getDate(date) {
				this.date = date
			},
			tip() {
				console.log(1);
			}
		},
		components: {
			Calendar
		}
	}
</script>
<style scoped>
	.btn {
		width: 697rpx;
		height: 73rpx;
		background: #6A8A2D;
		border-radius: 11rpx;
		line-height: 73rpx;
		font-weight: bold;
		font-size: 32rpx;
		color: #FFFFFF;
		text-align: center;
		position: fixed;
		bottom: 30rpx;
		z-index: 999;
		text-align: center;
		left: 50%;
		transform: translate(-348.5rpx, 0);
	}
</style>