groupon-wx/uview-ui/components/u-calendar/u-calendar.vue

<template>
	<u-popup
		closeable
		:maskCloseAble="maskCloseAble"
		mode="bottom"
		:popup="false"
		v-model="value"
		length="auto"
		:safeAreaInsetBottom="safeAreaInsetBottom"
		@close="close"
		:z-index="uZIndex"
		:border-radius="borderRadius"
		:closeable="closeable"
	>
		<view class="u-calendar">
			<view class="u-calendar__header">
				<view class="u-calendar__header__text" v-if="!$slots['tooltip']">{{ toolTip }}</view>
				<slot v-else name="tooltip" />
			</view>
			<view class="u-calendar__action u-flex u-row-center">
				<view class="u-calendar__action__icon"><u-icon v-if="changeYear" name="arrow-left-double" :color="yearArrowColor" @click="changeYearHandler(0)"></u-icon></view>
				<view class="u-calendar__action__icon"><u-icon v-if="changeMonth" name="arrow-left" :color="monthArrowColor" @click="changeMonthHandler(0)"></u-icon></view>
				<view class="u-calendar__action__text">{{ showTitle }}</view>
				<view class="u-calendar__action__icon"><u-icon v-if="changeMonth" name="arrow-right" :color="monthArrowColor" @click="changeMonthHandler(1)"></u-icon></view>
				<view class="u-calendar__action__icon"><u-icon v-if="changeYear" name="arrow-right-double" :color="yearArrowColor" @click="changeYearHandler(1)"></u-icon></view>
			</view>
			<view class="u-calendar__week-day">
				<view class="u-calendar__week-day__text" v-for="(item, index) in weekDayZh" :key="index">{{ item }}</view>
			</view>
			<view class="u-calendar__content">
				<!-- 前置空白部分 -->
				<block v-for="(item, index) in weekdayArr" :key="index"><view class="u-calendar__content__item"></view></block>
				<view
					class="u-calendar__content__item"
					:class="{
						'u-hover-class': openDisAbled(year, month, index + 1),
						'u-calendar__content--start-date': (mode == 'range' && startDate == `${year}-${month}-${index + 1}`) || mode == 'date',
						'u-calendar__content--end-date': (mode == 'range' && endDate == `${year}-${month}-${index + 1}`) || mode == 'date'
					}"
					:style="{ backgroundColor: getColor(index, 1) }"
					v-for="(item, index) in daysArr"
					:key="index"
					@tap="dateClick(index)"
				>
					<view class="u-calendar__content__item__inner" :style="{ color: getColor(index, 2) }">
						<view>{{ index + 1 }}</view>
					</view>
					<view
						class="u-calendar__content__item__tips"
						:style="{ color: activeColor }"
						v-if="mode == 'range' && startDate == `${year}-${month}-${index + 1}` && startDate != endDate"
					>
						{{ startText }}
					</view>
					<view class="u-calendar__content__item__tips" :style="{ color: activeColor }" v-if="mode == 'range' && endDate == `${year}-${month}-${index + 1}`">
						{{ endText }}
					</view>
				</view>
				<view class="u-calendar__content__bg-month">{{ month }}</view>
			</view>
			<view class="u-calendar__bottom">
				<view class="u-calendar__bottom__choose">
					<text>{{ mode == 'date' ? activeDate : startDate }}</text>
					<text v-if="endDate">至{{ endDate }}</text>
				</view>
				<view class="u-calendar__bottom__btn">
					<button class="u-reset-button submit-btn" :style="{ background: customStyle.background }" @tap="btnFix(false)">确定</button>
				</view>
			</view>
		</view>
	</u-popup>
</template>
<script>
/**
 * calendar 日历
 * @description 此组件用于单个选择日期，范围选择日期等，日历被包裹在底部弹起的容器中。
 * @tutorial http://uviewui.com/components/calendar.html
 * @property {String} mode 选择日期的模式，date-为单个日期，range-为选择日期范围
 * @property {Boolean} v-model 布尔值变量，用于控制日历的弹出与收起
 * @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配(默认false)
 * @property {Boolean} change-year 是否显示顶部的切换年份方向的按钮(默认true)
 * @property {Boolean} change-month 是否显示顶部的切换月份方向的按钮(默认true)
 * @property {String Number} max-year 可切换的最大年份(默认2050)
 * @property {String Number} min-year 最小可选日期(默认1950)
 * @property {String Number} min-date 可切换的最小年份(默认1950-01-01)
 * @property {String Number} max-date 最大可选日期(默认当前日期)
 * @property {String Number} 弹窗顶部左右两边的圆角值，单位rpx(默认20)
 * @property {Boolean} mask-close-able 是否允许通过点击遮罩关闭日历(默认true)
 * @property {String} month-arrow-color 月份切换按钮箭头颜色(默认#606266)
 * @property {String} year-arrow-color 年份切换按钮箭头颜色(默认#909399)
 * @property {String} color 日期字体的默认颜色(默认#303133)
 * @property {String} active-bg-color 起始/结束日期按钮的背景色(默认#2979ff)
 * @property {String Number} z-index 弹出时的z-index值(默认10075)
 * @property {String} active-color 起始/结束日期按钮的字体颜色(默认#ffffff)
 * @property {String} range-bg-color 起始/结束日期之间的区域的背景颜色(默认rgba(41,121,255,0.13))
 * @property {String} range-color 选择范围内字体颜色(默认#2979ff)
 * @property {String} start-text 起始日期底部的提示文字(默认 '开始')
 * @property {String} end-text 结束日期底部的提示文字(默认 '结束')
 * @property {String} btn-type 底部确定按钮的主题(默认 'primary')
 * @property {String} toolTip 顶部提示文字，如设置名为tooltip的slot，此参数将失效(默认 '选择日期')
 * @property {Boolean} closeable 是否显示右上角的关闭图标(默认true)
 * @example <u-calendar v-model="show" :mode="mode"></u-calendar>
 */

export default {
	name: 'u-calendar',
	props: {
		safeAreaInsetBottom: {
			type: Boolean,
			default: false
		},
		// 是否允许通过点击遮罩关闭Picker
		maskCloseAble: {
			type: Boolean,
			default: true
		},
		// 通过双向绑定控制组件的弹出与收起
		value: {
			type: Boolean,
			default: false
		},
		// 弹出的z-index值
		zIndex: {
			type: [String, Number],
			default: 0
		},
		// 是否允许切换年份
		changeYear: {
			type: Boolean,
			default: true
		},
		// 是否允许切换月份
		changeMonth: {
			type: Boolean,
			default: true
		},
		// date-单个日期选择，range-开始日期+结束日期选择
		mode: {
			type: String,
			default: 'date'
		},
		// 可切换的最大年份
		maxYear: {
			type: [Number, String],
			default: 2050
		},
		// 可切换的最小年份
		minYear: {
			type: [Number, String],
			default: 1950
		},
		// 最小可选日期(不在范围内日期禁用不可选)
		minDate: {
			type: [Number, String],
			default: '1950-01-01'
		},
		/**
		 * 最大可选日期
		 * 默认最大值为今天，之后的日期不可选
		 * 2030-12-31
		 * */
		maxDate: {
			type: [Number, String],
			default: ''
		},
		// 弹窗顶部左右两边的圆角值
		borderRadius: {
			type: [String, Number],
			default: 20
		},
		// 月份切换按钮箭头颜色
		monthArrowColor: {
			type: String,
			default: '#606266'
		},
		// 年份切换按钮箭头颜色
		yearArrowColor: {
			type: String,
			default: '#909399'
		},
		// 默认日期字体颜色
		color: {
			type: String,
			default: '#303133'
		},
		// 选中|起始结束日期背景色
		activeBgColor: {
			type: String,
			default: '#2979ff'
		},
		// 选中|起始结束日期字体颜色
		activeColor: {
			type: String,
			default: '#ffffff'
		},
		// 范围内日期背景色
		rangeBgColor: {
			type: String,
			default: 'rgba(41,121,255,0.13)'
		},
		// 范围内日期字体颜色
		rangeColor: {
			type: String,
			default: '#2979ff'
		},
		// mode=range时生效，起始日期自定义文案
		startText: {
			type: String,
			default: '开始'
		},
		// mode=range时生效，结束日期自定义文案
		endText: {
			type: String,
			default: '结束'
		},
		//按钮样式类型
		btnType: {
			type: String,
			default: 'primary'
		},
		customStyle: {
			type: Object,
			default: () => {
				return {};
			}
		},
		// 当前选中日期带选中效果
		isActiveCurrent: {
			type: Boolean,
			default: true
		},
		// 切换年月是否触发事件 mode=date时生效
		isChange: {
			type: Boolean,
			default: false
		},
		// 是否显示右上角的关闭图标
		closeable: {
			type: Boolean,
			default: true
		},
		// 顶部的提示文字
		toolTip: {
			type: String,
			default: '选择日期'
		}
	},
	data() {
		return {
			// 星期几,值为1-7
			weekday: 1,
			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,
			weekDayZh: ['日', '一', '二', '三', '四', '五', '六']
		};
	},
	computed: {
		dataChange() {
			return `${this.mode}-${this.minDate}-${this.maxDate}`;
		},
		uZIndex() {
			// 如果用户有传递z-index值，优先使用
			return this.zIndex ? this.zIndex : this.$u.zIndex.popup;
		}
	},
	watch: {
		dataChange(val) {
			this.init();
		}
	},
	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;
		},
		init() {
			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;
			this.endYear = 0;
			this.endMonth = 0;
			this.endDay = 0;
			this.endDate = '';
			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 + '';
		},
		//一个月有多少天
		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;
		},
		changeMonthHandler(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();
				}
			}
		},
		changeYearHandler(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.mode == 'date') {
				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.mode == 'date') {
					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;
					}
				}
			}
		},
		close() {
			// 修改通过v-model绑定的父组件变量的值为false，从而隐藏日历弹窗
			this.$emit('input', false);
		},
		getWeekText(date) {
			date = new Date(`${date.replace(/\-/g, '/')} 00:00:00`);
			let week = date.getDay();
			return '星期' + ['日', '一', '二', '三', '四', '五', '六'][week];
		},
		btnFix(show) {
			if (!show) {
				this.close();
			}
			if (this.mode == 'date') {
				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;
				}
				this.$emit('change', {
					year: year,
					month: month,
					day: day,
					days: days,
					result: result,
					week: weekText,
					isToday: isToday
					// switch: show //是否是切换年月操作
				});
			} 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 endMonth = this.formatNum(this.endMonth);
				let endDay = this.formatNum(this.endDay);
				let endDate = `${this.endYear}-${endMonth}-${endDay}`;
				let endWeek = this.getWeekText(endDate);
				this.$emit('change', {
					startYear: this.startYear,
					startMonth: this.startMonth,
					startDay: this.startDay,
					startDate: startDate,
					startWeek: startWeek,
					endYear: this.endYear,
					endMonth: this.endMonth,
					endDay: this.endDay,
					endDate: endDate,
					endWeek: endWeek
				});
			}
		}
	}
};
</script>

<style scoped lang="scss">
@import '../../libs/css/style.components.scss';

.u-calendar {
	color: $u-content-color;

	&__header {
		width: 100%;
		box-sizing: border-box;
		font-size: 30rpx;
		background-color: #fff;
		color: $u-main-color;

		&__text {
			margin-top: 30rpx;
			padding: 0 60rpx;
			@include vue-flex;
			justify-content: center;
			align-items: center;
		}
	}

	&__action {
		padding: 40rpx 0 40rpx 0;

		&__icon {
			margin: 0 16rpx;
		}

		&__text {
			padding: 0 16rpx;
			color: $u-main-color;
			font-size: 32rpx;
			line-height: 32rpx;
			font-weight: bold;
		}
	}

	&__week-day {
		@include vue-flex;
		align-items: center;
		justify-content: center;
		padding: 6px 0;
		overflow: hidden;

		&__text {
			flex: 1;
			text-align: center;
		}
	}

	&__content {
		width: 100%;
		@include vue-flex;
		flex-wrap: wrap;
		padding: 6px 0;
		box-sizing: border-box;
		background-color: #fff;
		position: relative;

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

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

		&__item {
			width: 14.2857%;
			@include vue-flex;
			align-items: center;
			justify-content: center;
			padding: 6px 0;
			overflow: hidden;
			position: relative;
			z-index: 2;

			&__inner {
				height: 84rpx;
				@include vue-flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				font-size: 32rpx;
				position: relative;
				border-radius: 50%;

				&__desc {
					width: 100%;
					font-size: 24rpx;
					line-height: 24rpx;
					transform: scale(0.75);
					transform-origin: center center;
					position: absolute;
					left: 0;
					text-align: center;
					bottom: 2rpx;
				}
			}

			&__tips {
				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;
			}
		}

		&__bg-month {
			position: absolute;
			font-size: 130px;
			line-height: 130px;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			color: #e4e7ed;
			z-index: 1;
		}
	}

	&__bottom {
		width: 100%;
		@include vue-flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		background-color: #fff;
		padding: 0 40rpx 30rpx;
		box-sizing: border-box;
		font-size: 24rpx;
		color: $u-tips-color;

		&__choose {
			height: 50rpx;
		}

		&__btn {
			width: 100%;
		}
		.submit-btn {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			background: #fff;
			border-radius: 100rpx;
			color: #fff;
			background: #2979ff;
			font-size: 28rpx;
		}
	}
}
</style>