<template>
<transition name="fade">
<div class="calendar-tz" v-if="isShow" :class="isFixed && 'fixed'">
<slot name="header"></slot>
<div class="week-number">
<span v-for="(item, index) in weekList" :style="{ color: (index == 0 || index == weekList.length - 1) && themeColor }" :key="index">{{ item }}</span>
</div>
<p class="tips" v-if="title">{{ title }}</p>
<div class="content" id="scrollWrap">
<div class="con" v-for="(item, index) in calendar" :key="index" :id="item.year + '' + item.month">
<h3 v-text="item.year + '年' + item.month + '月'"></h3>
<span class="month-bg" :style="{ color: getBetweenColor }">{{ item.month }}</span>
<ul class="each-month">
<li
class="each-day"
v-for="(day, idx) in item.dayList"
:key="idx"
:class="[addClassBg(day, item.month, item.year)]"
:style="{ background: themeOpacityBg(day, item.month, item.year) }"
@click="chooseDate(day, item.month, item.year)"
>
<div :class="[addClassName(day, item.month, item.year)]" :style="{ background: themeBg(day, item.month, item.year) }">
<p class="day-tip" :style="{ color: themeColor }"><i v-text="setTip(day, item.month, item.year, 1)"></i></p>
<p class="day">{{ day ? day : '' }}</p>
<p class="recent"><i v-text="setTip(day, item.month, item.year, 2)"></i></p>
</div>
</li>
</ul>
</div>
</div>
<slot name="footer"></slot>
</div>
</transition>
</template>
<script>
export default {
props: {
isShow: {
//是否显示
type: [Boolean],
default() {
return false;
}
},
isFixed: {
//是否定位全屏
type: [Boolean],
default() {
return true;
}
},
transition: {
//动画类型slide
type: [String],
default() {
return '';
}
},
title: {
//头部的一段文本
type: [String, Object],
default() {
return '';
}
},
mode: {
//模式：1普通日历，2酒店，3飞机往返
type: [String, Number],
default() {
return 1;
}
},
startDate: {
//开始日期
type: [String, Object, Date]
},
endDate: {
//结束日期
type: [String, Object, Date]
},
betweenStart: {
//日历可选范围开始
type: [String, Object, Date],
default() {
return '';
}
},
betweenEnd: {
//日历可选结束日期
type: [String, Object, Date],
default() {
return '';
}
},
initMonth: {
//初始化的月数
type: [String, Number],
default() {
return 6;
}
},
themeColor: {
//主题色
type: [String],
default: '#1C75FF'
}
},
data() {
return {
startDates: '',
endDates: '',
betweenStarts: '',
betweenEnds: '',
calendar: [],
weekList: ['日', '一', '二', '三', '四', '五', '六']
};
},
watch: {
isShow() {
this.init();
},
betweenStart() {
this.init();
},
betweenEnd() {
this.init();
}
},
mounted() {
this.init();
},
computed: {
//设置主题色入住离开之间的背景色
getBetweenColor() {
if (!this.themeColor) return;
var hex = this.themeColor;
if (hex.length == 4) {
hex = `#${hex[1]}${hex[1]}${hex[2]}${hex[2]}${hex[3]}${hex[3]}`;
}
var str = 'rgba(' + parseInt('0x' + hex.slice(1, 3)) + ',' + parseInt('0x' + hex.slice(3, 5)) + ',' + parseInt('0x' + hex.slice(5, 7)) + ',0.1)';
return str;
}
},
methods: {
init() {
var date = new Date();
this.year = date.getFullYear();
this.month = date.getMonth() + 1;
this.day = date.getDate();
this.today = new Date(this.year + '/' + this.month + '/' + this.day) * 1;
if (!this.startDate) {
const year = date.getFullYear(),
month = date.getMonth() + 1,
day = date.getDate();
this.startDates = this.resetTime(year + '/' + month + '/' + day);
this.startYear = year;
this.startMonth = month;
} else {
this.startDates = this.resetTime(this.startDate);
var dd = this.startDate.replace(/-/g, '/').split('/');
this.startYear = dd[0];
this.startMonth = dd[1];
}
if (!this.endDate) {
// var temp = this.startDates + 24 * 60 * 60 * 1000;
// var dateTemp = new Date(temp);
// const year = dateTemp.getFullYear(),
// month = dateTemp.getMonth() + 1,
// day = dateTemp.getDate();
// this.endDates = this.resetTime(year + "/" + month + "/" + day);
// this.endYear = year;
// this.endMonth = month;
} else {
this.endDates = this.resetTime(this.endDate);
var dd = this.endDate.replace(/-/g, '/').split('/');
this.endYear = dd[0];
this.endMonth = dd[1];
}
this.betweenStarts = this.resetTime(this.betweenStart);
this.betweenEnds = this.resetTime(this.betweenEnd);
this.createClendar(); //创建日历数据
},
//创建每个月日历数据，传入月份1号前面用null填充
createDayList(month, year) {
const count = this.getDayNum(month, year),
_week = new Date(year + '/' + month + '/1').getDay();
let list = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28];
for (let i = 29; i <= count; i++) {
list.push(i);
}
for (let i = 0; i < _week; i++) {
list.unshift(null);
}
return list;
},
//计算传入月份有多少天
getDayNum(month, year) {
let dayNum = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {
dayNum[1] = 29;
}
return dayNum[month - 1];
},
//根据当天和结束日期创建日历数据
createClendar() {
var yearTemp = this.year;
var monthTemp = this.month;
if (!!this.betweenStarts) {
//如果有范围起始日期，可选范围从betweenStart开始
yearTemp = new Date(this.betweenStarts).getFullYear();
monthTemp = new Date(this.betweenStarts).getMonth() + 1;
}
this.calendar = [];
for (let i = 0; i < this.initMonth; i++) {
let year = yearTemp;
let month = monthTemp + i;
let _monthData = {
dayList: [],
month: '',
year: ''
};
var m = Math.ceil(month / 12);
if (m > 0) {
year += m - 1;
} else {
year += m - 1;
}
if (month > 12) {
month = month % 12 == 0 ? 12 : month % 12;
}
if (month <= 0) {
month = 12 + (month % 12);
}
_monthData.year = year;
_monthData.month = month;
_monthData.dayList = this.createDayList(month, year);
this.calendar.push(_monthData);
}
//h5默认页面加载到当前日期start-date的位置
if (document) {
this.scrollTop(this.startYear, this.startMonth);
}
},
scrollTop(year, month) {
var id = year + '' + parseInt(month);
setTimeout(() => {
var obj = document.getElementById(id);
if (!obj) return;
var wrap = document.getElementById('scrollWrap');
wrap.scrollTop = obj.offsetTop - 40;
}, 0);
},
//添加日历样式
addClassName(day, month, year) {
if (!day) return;
const _date = new Date(year + '/' + month + '/' + day);
let className = [];
// if (_date.getDay() == 0 || _date.getDay() == 6) { //周末或周六样式
// className.push('weekend')
// }
if (_date * 1 == this.today) {
className.push('today');
}
if (this.mode == 1) {
if (_date * 1 == this.startDates) {
className.push('trip-time');
}
} else {
if (_date * 1 == this.startDates || _date * 1 == this.endDates) {
className.push('trip-time');
}
}
if (this.betweenStarts) {
_date * 1 < this.betweenStarts && className.push('disabled');
} else {
_date * 1 < this.today && className.push('disabled'); //当天和结束日期之外不可选
}
_date * 1 > this.betweenEnds && className.push('disabled');
return className.join(' ');
},
//入住离开的区间背景色
addClassBg(day, month, year) {
if (!day) return;
const _date = this.resetTime(year + '/' + month + '/' + day);
let className = [];
if (_date >= this.startDates && _date <= this.endDates && this.mode > 1) {
className.push('between');
}
return className.join(' ');
},
//theme入住离开的区间背景色
themeOpacityBg(day, month, year) {
if (!this.themeColor) return;
if (!day) return;
const _date = this.resetTime(year + '/' + month + '/' + day);
if (_date >= this.startDates && _date <= this.endDates && this.mode > 1) {
return this.getBetweenColor;
}
},
//theme获取普通日期选中样式背景
themeBg(day, month, year) {
if (!this.themeColor) return;
const _date = this.resetTime(year + '/' + month + '/' + day);
//正常模式
if (this.mode == 1) {
if (_date == this.startDates) {
return this.themeColor;
}
} else {
//酒店和往返模式
if (_date == this.startDates || _date == this.endDates) {
return this.themeColor;
}
}
},
//清除时间 时 分 秒 毫秒
resetTime(dateStr) {
var date = new Date(dateStr.replace(/-/g, '/'));
date.setHours(0);
date.setMinutes(0);
date.setSeconds(0);
date.setMilliseconds(0);
return date * 1;
},
//flag==1（返回今天，明天，后天)，flag==2（返回入住，离开，去返)
setTip(day, month, year, flag) {
if (!day) return;
var tip = '';
var _date = this.resetTime(year + '/' + month + '/' + day);
if (flag == 1) {
if (_date == this.today) {
tip = '今天';
} else if (_date - this.today == 24 * 3600 * 1000) {
tip = '明天';
} else if (_date - this.today == 2 * 24 * 3600 * 1000) {
tip = '后天';
}
return tip;
} else {
if (this.mode == 2) {
if (_date == this.endDates) {
tip = '离店';
} else if (_date == this.startDates) {
tip = '入住';
}
} else if (this.mode == 3) {
if (_date == this.startDates && !this.endDates) {
tip = '去/返';
} else {
if (_date == this.endDates) {
tip = '返程';
} else if (_date == this.startDates) {
tip = '去程';
}
}
}
return tip;
}
},
//是否是选中当天，或者入住离开当天
isCurrent(day, month, year) {
if (!day) {
return false;
}
const _date = this.resetTime(year + '/' + month + '/' + day);
//正常模式
if (this.mode == 1) {
if (_date == this.startDates) {
return true;
}
} else {
//酒店和往返模式
if (_date == this.startDates || _date == this.endDates) {
return true;
}
}
},
dateFormat(times) {
let date = new Date(times);
let recent = '';
if (times == this.today) {
recent = '今天';
} else if (times - this.today === 24 * 3600 * 1000) {
recent = '明天';
} else if (times - this.today === 2 * 24 * 3600 * 1000) {
recent = '后天';
}
var year = date.getFullYear();
var month = parseInt(date.getMonth() + 1) > 9 ? parseInt(date.getMonth() + 1) : '0' + parseInt(date.getMonth() + 1);
var day = date.getDate() > 9 ? date.getDate() : '0' + date.getDate();
return {
dateStr: year + '-' + month + '-' + day,
week: '周' + this.weekList[date.getDay()],
recent
};
},
chooseDate(day, month, year) {
const _date = this.resetTime(year + '/' + month + '/' + day);
const week = this.weekList[new Date(_date).getDay()];
//判断日期区域是否可点击
if (!day) return;
if (this.betweenStarts) {
if (_date * 1 < this.betweenStarts) return;
} else {
if (_date < this.today) return;
}
if (_date > this.betweenEnds) return;
//判断酒店或者往返模式的选择逻辑
if (this.startDates && this.endDates && _date > this.endDates) {
this.startDates = _date;
this.endDates = '';
} else if (this.endDates && _date > this.endDates) {
this.endDates = _date;
} else if (_date >= this.startDates && _date <= this.endDates) {
this.startDates = _date;
this.endDates = '';
} else if (_date < this.startDates) {
this.startDates = _date;
this.endDates = '';
} else if (_date > this.startDates) {
if (this.mode == 1) {
this.startDates = _date;
} else {
this.endDates = _date;
}
}
const choose = {
startStr: this.dateFormat(this.startDates)
};
if (this.mode == 1) {
this.$emit('callback', choose);
} else if (this.mode == 2 && this.startDates && this.endDates) {
choose.dayCount = (this.endDates - this.startDates) / 24 / 3600 / 1000;
choose.endStr = this.dateFormat(this.endDates);
this.$emit('callback', choose);
} else if (this.mode == 3) {
if (this.startDates && this.endDates) {
choose.dayCount = (this.endDates - this.startDates) / 24 / 3600 / 1000;
choose.endStr = this.dateFormat(this.endDates);
} else if (this.startDates && !this.endDates) {
choose.dayCount = 0;
choose.endStr = this.dateFormat(this.startDates);
}
this.$emit('callback', choose);
}
}
}
};
</script>
<style lang="less" scoped>
@color: #1c75ff;
/* 添加淡入淡出动画 */
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.8s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
.calendar-tz {
width: 100%;
height: 100vh;
background: #fff;
display: -webkit-box;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
&.fixed {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 900;
}
.week-number {
background: #fff;
padding: 0 1%;
box-shadow: 0 2px 15px rgba(100, 100, 100, 0.1);
span {
display: inline-block;
text-align: center;
padding: 12px 0;
font-size: 14px;
width: 14.28%;
&:first-child,
&:last-child {
color: @color;
}
}
}
.tips {
padding: 6px 10px;
background: #fff7dc;
font-size: 12px;
color: #9e8052;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.content {
-webkit-box-flex: 1;
flex: 1;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
.con {
color: #333;
padding-top: 10px;
position: relative;
h3 {
width: 100%;
font-weight: normal;
text-align: center;
font-size: 16px;
padding: 10px 0;
}
.month-bg {
position: absolute;
text-align: center;
opacity: 0.8;
left: 0;
right: 0;
bottom: 0;
top: 20%;
font-size: 220px;
font-weight: bold;
color: #f8f8f8;
}
.each-month {
display: block;
width: 98%;
font-size: 0;
margin: 0 auto;
padding-left: 0;
padding-bottom: 10px;
border-bottom: 1px solid #eee;
.each-day {
position: relative;
display: inline-block;
text-align: center;
vertical-align: middle;
width: 14.28%;
font-size: 16px;
height: 50px;
margin: 2px auto;
div {
display: inline-block;
font-size: 14px;
width: 98%;
height: 100%;
justify-content: space-around;
display: -webkit-box;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
border-radius: 4px;
}
&.between {
background: rgba(75, 217, 173, 0.1);
}
.day {
font-size: 16px;
}
.day-tip,
.recent {
font-size: 10px;
height: 14px;
i {
font-size: 10px;
}
}
.recent {
color: #ccc;
}
.disabled {
color: #ccc !important;
.day-tip {
color: #ccc !important;
}
}
.today {
background: rgba(100, 100, 100, 0.1);
}
.trip-time {
background: @color;
color: #fff !important;
.recent,
.day-tip {
color: #fff !important;
}
}
.weekend {
color: @color;
}
}
}
}
}
}
/***右侧进入动画***/
.slide-enter-active,
.slide-leave-active {
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.slide-enter,
.slide-leave-to {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
</style>
使用-
<template>
<view>
<calendar :is-show="ishow" mode="2" :transition="'slide'" :theme-color="'#CAA561'" :startDate="startDate" :endDate="endDate" @callback="handleGetDate">
<template v-slot:header>
<view class="date" @click="open">
<view class="date_left">
<view class="montey">入住日期</view>
<view class="date_ru">
{{ convertDate(startDate) }}
<text class="text">{{ startWeek }}</text>
</view>
</view>
<view class="date_center">共{{ countDate }}晚</view>
<view class="date_right">
<view class="montey">离店日期</view>
<view class="date_ru">
{{ convertDate(endDate) }}
<text class="text">{{ endWeek }}</text>
</view>
</view>
</view>
</template>
<template v-slot:footer>
<view class="calendar_footer" @click="onclose()">确认/关闭</view>
</template>
</calendar>
</view>
</template>
<script>
import { mapState } from 'vuex';
import calendar from '@/subpackage1/mobile-calendar-simple/Calendar.vue';
import eventBus from '@/utils/eventBus';
export default {
components: {
calendar
},
computed: {
...mapState(['startDate', 'startWeek', 'endDate', 'endWeek', 'countDate', 'ishow'])
},
onl oad(option) {
// 初始化显示状态和日期信息
this.$store.commit('UPDATE_ISHOW', true);
const hasValidStartDate = this.startDate && this.startDate.length > 0;
const hasValidEndDate = this.endDate && this.endDate.length > 0;
if (!hasValidStartDate || !hasValidEndDate) {
// 如果Vuex store中的数据无效，则使用页面传递的数据
console.log('进入日期页面', option);
// 构建默认值
const payload = {
startDate: option.startDate,
startWeek: option.startWeek,
endDate: option.endDate,
endWeek: option.endWeek,
countDate: option.countDate
};
// 更新Vuex store中的日期信息
this.$store.dispatch('updateDate', payload);
}
},
methods: {
convertDate(dateStr) {
if (!dateStr) return;
// 分割日期字符串
const [year, month, day] = dateStr.split('-').map(Number);
// 格式化月份和日期，确保它们至少有两位数
const formattedMonth = month.toString().padStart(2, '0');
const formattedDay = day.toString().padStart(2, '0');
// 返回格式化的日期字符串
return `${formattedMonth}月${formattedDay}日`;
},
onclose() {
this.$store.commit('UPDATE_ISHOW', false); // 更新显示状态
this.navBack();
},
navBack() {
const pages = getCurrentPages(); // 获取当前页面栈
const currentPage = pages[pages.length - 1]; // 获取当前页面实例
if (pages.length === 1) {
// 如果当前页面是第一个页面，导航回主页
uni.reLaunch({
url: '/pages/my/index' // 主页的路径
});
} else {
// 否则，返回上一级页面
uni.navigateBack();
}
},
handleGetDate(date) {
console.log('11111111', date);
this.$store.dispatch('updateDate', {
startDate: date.startStr.dateStr,
startWeek: date.startStr.week,
endDate: date.endStr.dateStr,
endWeek: date.endStr.week,
countDate: date.dayCount
});
eventBus.$emit('dateUpdated'); // 使用事件总线通知其他组件
}
}
};
</script>
<style lang="scss" scoped>
.date {
display: flex;
justify-content: space-between;
align-items: center;
padding: 50rpx;
.montey {
height: 34rpx;
font-size: 24rpx;
font-family: PingFang HK, PingFang HK-Regular;
font-weight: 400;
color: #4e5969;
}
.date_ru {
font-size: 32rpx;
font-family: PingFang HK, PingFang HK-Medium;
font-weight: 500;
text-align: left;
color: #121212;
.text {
margin-left: 16rpx;
font-size: 20rpx;
font-family: PingFang HK, PingFang HK-Regular;
font-weight: 400;
text-align: left;
color: #4e5969;
}
}
.date_center {
font-size: 24rpx;
font-family: PingFang HK, PingFang HK-Regular;
font-weight: 400;
border-bottom: 2rpx solid #caa561;
padding-bottom: 5rpx;
color: #333333;
text-align: center;
font-family: PingFang HK, PingFang HK-Regular;
}
}
.calendar_footer {
width: 702rpx;
height: 90rpx;
background: linear-gradient(118deg, #d7b47c 11%, #d1a456 93%);
border-radius: 8rpx;
text-align: center;
line-height: 90rpx;
margin: 0 auto 60rpx;
color: #fff;
}
</style>
标签：uniapp,return,startDates,month,date,入离,year,组件,day From： https://blog.csdn.net/YM_010530/article/details/144723386