You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
87 lines
1.8 KiB
87 lines
1.8 KiB
<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>
|