jbangjia_applet/components/thorui/tui-calendar/tui-calendar.vue

<template>
	<view>
		<view :class="{ 'tui-bottom-popup': isFixed, 'tui-popup-show': isShow && isFixed }">
			<view class="tui-calendar-header" :class="{ 'tui-calendar-radius': radius }" @touchmove.stop.prevent="stop" v-if="isFixed">
				<view>日期选择</view>
				<view class="tui-iconfont tui-font-close" hover-class="tui-opacity" :hover-stay-time="150" @tap="hide"></view>
			</view>

			<view class="tui-date-box">
				<view
					class="tui-iconfont tui-font-arrowleft"
					:style="{ color: yearArrowColor }"
					hover-class="tui-opacity"
					:hover-stay-time="150"
					v-if="arrowType == 1"
					@tap="changeYear(0)"
				></view>
				<view class="tui-iconfont tui-font-arrowleft" :style="{ color: monthArrowColor }" hover-class="tui-opacity" :hover-stay-time="150" @tap="changeMonth(0)"></view>
				<view class="tui-date_time">{{ showTitle }}</view>
				<view class="tui-iconfont tui-font-arrowright" :style="{ color: monthArrowColor }" hover-class="tui-opacity" :hover-stay-time="150" @tap="changeMonth(1)"></view>
				<view
					class="tui-iconfont tui-font-arrowright"
					:style="{ color: yearArrowColor }"
					hover-class="tui-opacity"
					:hover-stay-time="150"
					v-if="arrowType == 1"
					@tap="changeYear(1)"
				></view>
			</view>
			<view class="tui-date-header">
				<view class="tui-date">日</view>
				<view class="tui-date">一</view>
				<view class="tui-date">二</view>
				<view class="tui-date">三</view>
				<view class="tui-date">四</view>
				<view class="tui-date">五</view>
				<view class="tui-date">六</view>
			</view>
			<view class="tui-date-content" :class="{ 'tui-flex-start': isFixed && fixedHeight }" :style="{ height: isFixed && fixedHeight ? dateHeight * 6 + 'px' : 'auto' }">
				<block v-for="(item, index) in weekdayArr" :key="index"><view class="tui-date"></view></block>
				<view
					class="tui-date"
					:class="{
						'tui-date-pd_0': isFixed && fixedHeight,
						'tui-opacity': openDisAbled(year, month, index + 1),
						'tui-start-date': (type == 2 && startDate == `${year}-${month}-${index + 1}`) || type == 1,
						'tui-end-date': (type == 2 && endDate == `${year}-${month}-${index + 1}`) || type == 1
					}"
					:style="{ backgroundColor: isFixed ? getColor(index, 1) : 'transparent', height: isFixed && fixedHeight ? dateHeight + 'px' : 'auto' }"
					v-for="(item, index) in daysArr"
					:key="index"
					@tap="dateClick(index)"
				>
					<view class="tui-date-text" :style="{ color: isFixed ? getColor(index, 2) : getStatusData(3, index), backgroundColor: getStatusData(2, index) }">
						<view v-if="isFixed || !getStatusData(4, index)">{{ index + 1 }}</view>
						<view v-if="!getStatusData(4, index)" class="tui-custom-desc" :class="{ 'tui-lunar-unshow': !lunar && isFixed }">
							{{ getDescText(index, startDate, endDate) }}
						</view>
						<text class="tui-iconfont tui-font-check" v-if="getStatusData(4, index)"></text>
					</view>
					<view class="tui-date-desc" :style="{ color: activeColor }" v-if="!lunar && type == 2 && startDate == `${year}-${month}-${index + 1}` && startDate != endDate">
						{{ startText }}
					</view>
					<view class="tui-date-desc" :style="{ color: activeColor }" v-if="!lunar && type == 2 && endDate == `${year}-${month}-${index + 1}`">{{ endText }}</view>
				</view>
				<view class="tui-bg-month">{{ month }}</view>
			</view>

			<view class="tui-calendar-op" v-if="isFixed" @touchmove.stop.prevent="stop">
				<view class="tui-calendar-result">
					<text>{{ type == 1 ? activeDate : startDate }}</text>
					<text v-if="endDate">至{{ endDate }}</text>
				</view>
				<view class="tui-calendar-btn_box"><tui-button :type="btnType" height="72rpx" shape="circle" :size="28" @click="btnFix(false)">确定</tui-button></view>
			</view>
		</view>

		<view class="tui-popup-mask" :class="[isShow ? 'tui-mask-show' : '']" @touchmove.stop.prevent="stop" v-if="isFixed" @tap="hide"></view>
	</view>
</template>
<script>
//easycom组件模式 无需手动引入
// import tuiButton from "../tui-button/tui-button"
const calendar = require('./tui-calendar.js');
export default {
	name: 'tuiCalendar',
	// components:{
	// 	tuiButton
	// },
	props: {
		//1-切换月份和年份 2-切换月份
		arrowType: {
			type: [Number, String],
			default: 1
		},
		//1-单个日期选择 2-开始日期+结束日期选择
		type: {
			type: Number,
			default: 1
		},
		//可切换最大年份
		maxYear: {
			type: Number,
			default: 2030
		},
		//可切换最小年份
		minYear: {
			type: Number,
			default: 1920
		},
		//最小可选日期(不在范围内日期禁用不可选)
		minDate: {
			type: String,
			default: '1920-01-01'
		},
		/**
		 * 最大可选日期
		 * 默认最大值为今天，之后的日期不可选
		 * 2030-12-31
		 * */
		maxDate: {
			type: String,
			default: ''
		},
		//显示圆角
		radius: {
			type: Boolean,
			default: true
		},
		//状态 数据顺序与当月天数一致，index=>day
		/**
				 * [{
					 * text:"", 描述：2字以内
					 * value:"",状态值 
					 * bgColor:"",背景色
					 * color:""  文字颜色,
					 * check:false //是否显示对勾
					 * 
				 }]
				 * 
				 * **/
		status: {
			type: Array,
			default() {
				return [];
			}
		},
		//月份切换箭头颜色
		monthArrowColor: {
			type: String,
			default: '#999'
		},
		//年份切换箭头颜色
		yearArrowColor: {
			type: String,
			default: '#bcbcbc'
		},
		//默认日期字体颜色
		color: {
			type: String,
			default: '#333'
		},
		//选中|起始结束日期背景色
		activeBgColor: {
			type: String,
			default: '#5677fc'
		},
		//选中|起始结束日期字体颜色
		activeColor: {
			type: String,
			default: '#fff'
		},
		//范围内日期背景色
		rangeBgColor: {
			type: String,
			default: 'rgba(86,119,252,0.1)'
		},
		//范围内日期字体颜色
		rangeColor: {
			type: String,
			default: '#5677fc'
		},
		//type=2时生效，起始日期自定义文案
		startText: {
			type: String,
			default: '开始'
		},
		//type=2时生效，结束日期自定义文案
		endText: {
			type: String,
			default: '结束'
		},
		//按钮样式类型
		btnType: {
			type: String,
			default: 'primary'
		},
		//固定在底部
		isFixed: {
			type: Boolean,
			default: false
		},
		//固定日历容器高度，isFixed=true时生效
		fixedHeight: {
			type: Boolean,
			default: true
		},
		//当前选中日期带选中效果
		isActiveCurrent: {
			type: Boolean,
			default: true
		},
		//切换年月是否触发事件 type=1时生效
		isChange: {
			type: Boolean,
			default: false
		},
		//是否显示农历
		lunar: {
			type: Boolean,
			default: false
		},
		//初始化起始选中日期 格式： 2020-06-06 或 2020/06/06 【type=1 or 2】
		initStartDate: {
			type: String,
			default: ''
		},
		//初始化结束日期 格式： 2020-06-06 或 2020/06/06【type=2】
		initEndDate: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			isShow: false,
			weekday: 1, // 星期几,值为1-7
			weekdayArr: [],
			days: 0, //当前月有多少天
			daysArr: [],
			showTitle: '',
			year: 2020,
			month: 0,
			day: 0,
			startYear: 0,
			startMonth: 0,
			startDay: 0,
			endYear: 0,
			endMonth: 0,
			endDay: 0,
			today: '',
			activeDate: '',
			startDate: '',
			endDate: '',
			isStart: true,
			min: null,
			max: null,
			dateHeight: 20
		};
	},
	computed: {
		dataChange() {
			return `${this.type}-${this.minDate}-${this.maxDate}-${this.initStartDate}-${this.initEndDate}`;
		}
	},
	watch: {
		dataChange(val) {
			this.init();
		},
		fixedHeight(val) {
			if (val) {
				this.initDateHeight();
			}
		}
	},
	created() {
		this.init();
	},
	methods: {
		getColor(index, type) {
			let color = type == 1 ? '' : this.color;
			let day = index + 1;
			let date = `${this.year}-${this.month}-${day}`;
			let timestamp = new Date(date.replace(/\-/g, '/')).getTime();
			let start = this.startDate.replace(/\-/g, '/');
			let end = this.endDate.replace(/\-/g, '/');
			if ((this.isActiveCurrent && this.activeDate == date) || this.startDate == date || this.endDate == date) {
				color = type == 1 ? this.activeBgColor : this.activeColor;
			} else if (this.endDate && timestamp > new Date(start).getTime() && timestamp < new Date(end).getTime()) {
				color = type == 1 ? this.rangeBgColor : this.rangeColor;
			}
			return color;
		},
		//获取状态数据
		getStatusData(type, index) {
			//1-描述text,2-bgColor背景色,3-color文字颜色 4-check 是否显示对勾
			let val = ['', 'transparent', '#333', ''][type - 1];
			if (!this.isFixed && this.status && this.status.length > 0) {
				let item = this.status[index];
				if (item) {
					switch (type) {
						case 1:
							val = item.text;
							break;
						case 2:
							val = item.bgColor;
							break;
						case 3:
							val = item.color;
							break;
						case 4:
							val = item.check;
							break;
						default:
							break;
					}
				}
			}
			return val;
		},
		getDescText(index, startDate, endDate) {
			let text = this.lunar ? this.getLunar(this.year, this.month, index + 1) : '';
			if (this.isFixed && this.type == 2) {
				//此判断不能与上面条件一起判断
				if (this.lunar) {
					let date = `${this.year}-${this.month}-${index + 1}`;
					if (startDate == date && startDate != endDate) {
						text = this.startText;
					} else if (endDate == date) {
						text = this.endText;
					}
				}
			} else {
				let status = this.getStatusData(1, index);
				if (status) text = status;
			}
			return text;
		},
		getLunar(year, month, day) {
			let obj = calendar.solar2lunar(year, month, day);
			return obj.IDayCn;
		},
		initDateHeight() {
			if (this.fixedHeight && this.isFixed) {
				this.dateHeight = uni.getSystemInfoSync().windowWidth / 7;
			}
		},
		init() {
			this.initDateHeight();
			let now = new Date();
			this.year = now.getFullYear();
			this.month = now.getMonth() + 1;
			this.day = now.getDate();
			this.today = `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()}`;
			this.activeDate = this.today;
			this.min = this.initDate(this.minDate);
			this.max = this.initDate(this.maxDate || this.today);
			this.startDate = '';
			this.startYear = 0;
			this.startMonth = 0;
			this.startDay = 0;
			if (this.initStartDate) {
				let start = new Date(this.initStartDate.replace(/\-/g, '/'));
				if (this.type == 1) {
					this.year = start.getFullYear();
					this.month = start.getMonth() + 1;
					this.day = start.getDate();
					this.activeDate = `${start.getFullYear()}-${start.getMonth() + 1}-${start.getDate()}`;
				} else {
					this.startDate = `${start.getFullYear()}-${start.getMonth() + 1}-${start.getDate()}`;
					this.startYear = start.getFullYear();
					this.startMonth = start.getMonth() + 1;
					this.startDay = start.getDate();
					this.activeDate = '';
				}
				
			}
			this.endYear = 0;
			this.endMonth = 0;
			this.endDay = 0;
			this.endDate = '';
			if (this.initEndDate && this.type == 2) {
				let end = new Date(this.initEndDate.replace(/\-/g, '/'));
				this.endDate = `${end.getFullYear()}-${end.getMonth() + 1}-${end.getDate()}`;
				this.endYear = end.getFullYear();
				this.endMonth = end.getMonth() + 1;
				this.endDay = end.getDate();
				this.activeDate = '';
				this.year = end.getFullYear();
				this.month = end.getMonth() + 1;
				this.day = end.getDate();
			}
			this.isStart = true;
			this.changeData();
		},
		//日期处理
		initDate(date) {
			let fdate = date.split('-');
			return {
				year: Number(fdate[0] || 1920),
				month: Number(fdate[1] || 1),
				day: Number(fdate[2] || 1)
			};
		},
		openDisAbled: function(year, month, day) {
			let bool = true;
			let date = `${year}/${month}/${day}`;
			// let today = this.today.replace(/\-/g, '/');
			let min = `${this.min.year}/${this.min.month}/${this.min.day}`;
			let max = `${this.max.year}/${this.max.month}/${this.max.day}`;
			let timestamp = new Date(date).getTime();
			if (timestamp >= new Date(min).getTime() && timestamp <= new Date(max).getTime()) {
				bool = false;
			}
			return bool;
		},
		generateArray: function(start, end) {
			return Array.from(new Array(end + 1).keys()).slice(start);
		},
		formatNum: function(num) {
			return num < 10 ? '0' + num : num + '';
		},
		stop() {
			return !this.isFixed;
		},
		//一个月有多少天
		getMonthDay(year, month) {
			let days = new Date(year, month, 0).getDate();
			return days;
		},
		getWeekday(year, month) {
			let date = new Date(`${year}/${month}/01 00:00:00`);
			return date.getDay();
		},
		checkRange(year) {
			let overstep = false;
			if (year < this.minYear || year > this.maxYear) {
				uni.showToast({
					title: '日期超出范围啦~',
					icon: 'none'
				});
				overstep = true;
			}
			return overstep;
		},
		changeMonth(isAdd) {
			if (isAdd) {
				let month = this.month + 1;
				let year = month > 12 ? this.year + 1 : this.year;
				if (!this.checkRange(year)) {
					this.month = month > 12 ? 1 : month;
					this.year = year;
					this.changeData();
				}
			} else {
				let month = this.month - 1;
				let year = month < 1 ? this.year - 1 : this.year;
				if (!this.checkRange(year)) {
					this.month = month < 1 ? 12 : month;
					this.year = year;
					this.changeData();
				}
			}
		},
		changeYear(isAdd) {
			let year = isAdd ? this.year + 1 : this.year - 1;
			if (!this.checkRange(year)) {
				this.year = year;
				this.changeData();
			}
		},
		changeData() {
			this.days = this.getMonthDay(this.year, this.month);
			this.daysArr = this.generateArray(1, this.days);
			this.weekday = this.getWeekday(this.year, this.month);
			this.weekdayArr = this.generateArray(1, this.weekday);
			this.showTitle = `${this.year}年${this.month}月`;
			if (this.isChange && this.type == 1) {
				this.btnFix(true);
			}
		},
		dateClick: function(day) {
			day += 1;
			if (!this.openDisAbled(this.year, this.month, day)) {
				this.day = day;
				let date = `${this.year}-${this.month}-${day}`;
				if (this.type == 1) {
					this.activeDate = date;
				} else {
					let compare = new Date(date.replace(/\-/g, '/')).getTime() < new Date(this.startDate.replace(/\-/g, '/')).getTime();
					if (this.isStart || compare) {
						this.startDate = date;
						this.startYear = this.year;
						this.startMonth = this.month;
						this.startDay = this.day;
						this.endYear = 0;
						this.endMonth = 0;
						this.endDay = 0;
						this.endDate = '';
						this.activeDate = '';
						this.isStart = false;
					} else {
						this.endDate = date;
						this.endYear = this.year;
						this.endMonth = this.month;
						this.endDay = this.day;
						this.isStart = true;
					}
				}
				if (!this.isFixed) {
					this.btnFix();
				}
			}
		},
		show() {
			this.isShow = true;
		},
		hide() {
			this.isShow = false;
			this.$emit('hide', {})
		},
		getWeekText(date) {
			date = new Date(`${date.replace(/\-/g, '/')} 00:00:00`);
			let week = date.getDay();
			return '星期' + ['日', '一', '二', '三', '四', '五', '六'][week];
		},
		btnFix(show) {
			if (!show) {
				this.hide();
			}
			if (this.type == 1) {
				let arr = this.activeDate.split('-');
				let year = this.isChange ? this.year : Number(arr[0]);
				let month = this.isChange ? this.month : Number(arr[1]);
				let day = this.isChange ? this.day : Number(arr[2]);
				//当前月有多少天
				let days = this.getMonthDay(year, month);
				let result = `${year}-${this.formatNum(month)}-${this.formatNum(day)}`;
				let weekText = this.getWeekText(result);
				let isToday = false;
				if (`${year}-${month}-${day}` == this.today) {
					//今天
					isToday = true;
				}
				let lunar = calendar.solar2lunar(year, month, day);
				this.$emit('change', {
					year: year,
					month: month,
					day: day,
					days: days,
					result: result,
					week: weekText,
					isToday: isToday,
					switch: show, //是否是切换年月操作
					lunar: lunar
				});
			} else {
				if (!this.startDate || !this.endDate) return;
				let startMonth = this.formatNum(this.startMonth);
				let startDay = this.formatNum(this.startDay);
				let startDate = `${this.startYear}-${startMonth}-${startDay}`;
				let startWeek = this.getWeekText(startDate);
				let startLunar = calendar.solar2lunar(this.startYear, startMonth, startDay);

				let endMonth = this.formatNum(this.endMonth);
				let endDay = this.formatNum(this.endDay);
				let endDate = `${this.endYear}-${endMonth}-${endDay}`;
				let endWeek = this.getWeekText(endDate);
				let endLunar = calendar.solar2lunar(this.endYear, endMonth, endDay);
				this.$emit('change', {
					startYear: this.startYear,
					startMonth: this.startMonth,
					startDay: this.startDay,
					startDate: startDate,
					startWeek: startWeek,
					startLunar: startLunar,
					endYear: this.endYear,
					endMonth: this.endMonth,
					endDay: this.endDay,
					endDate: endDate,
					endWeek: endWeek,
					endLunar: endLunar
				});
			}
		}
	}
};
</script>

<style scoped>
@font-face {
	font-family: 'tuiDateFont';
	src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAVgAA0AAAAACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAFRAAAABoAAAAci0/w50dERUYAAAUkAAAAHgAAAB4AKQANT1MvMgAAAaAAAABDAAAAVjxuSNNjbWFwAAAB+AAAAEoAAAFS5iPQt2dhc3AAAAUcAAAACAAAAAj//wADZ2x5ZgAAAlQAAAFHAAABvPf29TBoZWFkAAABMAAAADAAAAA2GMsN3WhoZWEAAAFgAAAAHQAAACQHjAOFaG10eAAAAeQAAAATAAAAFgzQAPJsb2NhAAACRAAAABAAAAAQAOoBSG1heHAAAAGAAAAAHgAAACABEwA3bmFtZQAAA5wAAAFJAAACiCnmEVVwb3N0AAAE6AAAADQAAABLUwjqHHjaY2BkYGAAYp5Gj5/x/DZfGbhZGEDg1tUn7+F00P/LzOuY9YFcDgYmkCgAa0gNlHjaY2BkYGBu+N/AEMPCAALM6xgYGVABCwBT4AMaAAAAeNpjYGRgYGBn0GZgYgABEMkFhAwM/8F8BgANaAFLAAB42mNgZGFgnMDAysDA1Ml0hoGBoR9CM75mMGLkAIoysDIzYAUBaa4pDA7PGJ49ZG7438AQw9zA0AAUZgTJAQDrcAy8AHjaY2GAABYIDgLCBQx1AAcEAc8AeNpjYGBgZoBgGQZGBhDwAfIYwXwWBgMgzQGETAwMzxifcTx7+P8/kMUAYUkxS/6VVIXqAgNGNgY4lxGoB6QPBTAyDHsAADDkDYkAAAAAAAAAAAAAADQAagC2AN542m2QsU7DMBCG/Tt1bNPUiUnkSgiVtqKpxJAgVLVbeAa6MaK+B4JXgJWBjY21UtW5gpkdMTFX7dzApaJLhXU6n8+n//ttxtn458N79XJWZ8eMxS00C4wy9A1EP8PQncAlIQzS4WgsVtPpSmwzV3OFRqLetH5TSQMK939X61ptPZ2p2EAttNMLBRMrtschQblDeS34aY50cIkCzg/B2Y5C+VpyQxhFkRgu515O8jvU5mmPM2O0wJ5Z27vhX+yMsV437WvCdTM+GI40MgwKfuGammC0uURqeqFMfe9cxaJclkt5GMaB1hIR1VobOgpEiKq+sLZcIrJWhO3/Jw7qWlYj1Jf21FaCtmd5bevrlk28O/7A4spXTl4KTh9MTlqQ8PESBRstReic+sRj0Dni9fIqmNS/pXNWCvWOeYBmx5S9Bsn9Ah+5WtAAeNp9kD1OAzEQhZ/zByQSQiCoXVEA2vyUKRMp9Ailo0g23pBo1155nUg5AS0VB6DlGByAGyDRcgpelkmTImvt6PObmeexAZzjGwr/3yXuhBWO8ShcwREy4Sr1F+Ea+V24jhY+hRvUf4SbuFUD4RYu1BsdVO2Eu5vSbcsKZxgIV3CKJ+Eq9ZVwjfwqXMcVPoQb1L+EmxjjV7iFa2WpDOFhMEFgnEFjig3jAjEcLJIyBtahOfRmEsxMTzd6ETubOBso71dilwMeaDnngCntPbdmvkon/mDLgdSYbh4FS7YpjS4idCgbXyyc1d2oc7D9nu22tNi/a4E1x+xRDWzU/D3bM9JIbAyvkJI18jK3pBJTj2hrrPG7ZynW814IiU68y/SIx5o0dTr3bmniwOLn8owcfbS5kj33qBw+Y1kIeb/dTsQgil2GP5PYcRkAAAB42mNgYoAALjDJyIAO2MGiTIxMjMyMLIys7GmJeRmlmWZQ2pQ5OSORLaU0Mz2/FACDfwlbAAAAAf//AAIAAQAAAAwAAAAWAAAAAgABAAMABgABAAQAAAACAAAAAHjaY2BgYGQAgqtL1DlA9K2rT97DaABNlwiuAAA=)
		format('woff');
	font-weight: normal;
	font-style: normal;
}

.tui-iconfont {
	font-family: 'tuiDateFont' !important;
	font-size: 36rpx;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.tui-font-close:before {
	content: '\e608';
}

.tui-font-check:before {
	content: '\e6e1';
}

.tui-font-arrowright:before {
	content: '\e600';
}

.tui-font-arrowleft:before {
	content: '\e601';
}

.tui-date-box {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20rpx 0 30rpx;
	background-color: #fff;
}

.tui-calendar-radius {
	border-top-left-radius: 20rpx;
	border-top-right-radius: 20rpx;
	overflow: hidden;
}

.tui-date_time {
	padding: 0 16rpx;
	color: #333;
	font-size: 32rpx;
	line-height: 32rpx;
	font-weight: bold;
}

.tui-font-arrowleft {
	margin-right: 32rpx;
}

.tui-font-arrowright {
	margin-left: 32rpx;
}

.tui-date-header {
	width: 100%;
	display: flex;
	align-items: center;
	background-color: #fff;
	font-size: 24rpx;
	line-height: 24rpx;
	color: #555;
	box-shadow: 0 15rpx 20rpx -15rpx #efefef;
	position: relative;
	z-index: 2;
}

.tui-date-content {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	padding: 12rpx 0;
	box-sizing: border-box;
	background-color: #fff;
	position: relative;
}

.tui-flex-start {
	align-content: flex-start;
}

.tui-bg-month {
	position: absolute;
	font-size: 260rpx;
	line-height: 260rpx;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	color: #f5f5f7;
	z-index: 1;
}

.tui-date {
	width: 14.2857%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12rpx 0;
	overflow: hidden;
	position: relative;
	z-index: 2;
}

.tui-date-pd_0 {
	padding: 0 !important;
}

.tui-start-date {
	border-top-left-radius: 8rpx;
	border-bottom-left-radius: 8rpx;
}

.tui-end-date {
	border-top-right-radius: 8rpx;
	border-bottom-right-radius: 8rpx;
}

.tui-date-text {
	width: 80rpx;
	height: 80rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	font-size: 32rpx;
	line-height: 32rpx;
	position: relative;
	border-radius: 50%;
}

.tui-btn-calendar {
	padding: 16rpx;
	box-sizing: border-box;
	text-align: center;
	text-decoration: none;
}

.tui-opacity {
	opacity: 0.5;
}

.tui-bottom-popup {
	width: 100%;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	visibility: hidden;
	transform: translate3d(0, 100%, 0);
	transform-origin: center;
	transition: all 0.3s ease-in-out;
	min-height: 20rpx;
}

.tui-popup-show {
	transform: translate3d(0, 0, 0);
	visibility: visible;
}

.tui-popup-mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.6);
	z-index: 9996;
	transition: all 0.3s ease-in-out;
	opacity: 0;
	visibility: hidden;
}

.tui-mask-show {
	opacity: 1;
	visibility: visible;
}

.tui-calendar-header {
	width: 100%;
	height: 80rpx;
	padding: 0 40rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	font-size: 30rpx;
	background-color: #fff;
	color: #555;
	position: relative;
}

.tui-font-close {
	position: absolute;
	right: 30rpx;
	top: 50%;
	transform: translateY(-50%);
	color: #999;
}

.tui-btn-calendar {
	padding: 16rpx;
	box-sizing: border-box;
	text-align: center;
	text-decoration: none;
}

.tui-font-check {
	color: #fff;
	font-size: 54rpx;
	line-height: 54rpx;
}

.tui-custom-desc {
	width: 100%;
	font-size: 24rpx;
	line-height: 24rpx;
	transform: scale(0.8);
	transform-origin: center center;
	text-align: center;
}

.tui-lunar-unshow {
	position: absolute;
	left: 0;
	bottom: 8rpx;
	z-index: 2;
}

.tui-date-desc {
	width: 100%;
	font-size: 24rpx;
	line-height: 24rpx;
	position: absolute;
	left: 0;
	transform: scale(0.8);
	transform-origin: center center;
	text-align: center;
	bottom: 8rpx;
	z-index: 2;
}

.tui-calendar-op {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	background-color: #fff;
	padding: 0 42rpx 30rpx;
	box-sizing: border-box;
	font-size: 24rpx;
	color: #666;
}

.tui-calendar-result {
	height: 48rpx;
	transform: scale(0.9);
	transform-origin: center 100%;
}

.tui-calendar-btn_box {
	width: 100%;
}
</style>