vue/uni-app之空手撕日历

项目需要，没有合适的轮子，所以，，，

效果（红圈部分）：

需求

• 日期对应星期显示
• 今天包括今天之前禁用
• 某产品的最短预定时间内禁用，如提前三天，则今天明天后天禁用
• 日期下面显示对应的价格
• 简易版： 如果要当成完全的日历，还需完善

思路

• 传入年份，月份创建日历；日期价格数组；日期禁用数组

• 创建一个二维数组，第一维存放一月的周树，第二维存放一周的天数；一维的周树最多有七个数组

• 每个日期包含年月日三个属性，价格对应的日期也是年月日，禁用的日期页按照年月日，所以匹配一下就可以了

• 每月天数使用 js 原生判断，即：

  js 中 new Date('2019-06-21') 传入一个日期，可以用来判断某个月是否有某一天。

  没有的话，返回下一个月一号的构造函数；有的话返回这一天的构造函数；超出31号的则是Invalid

  

  // 验证日期是否有效：对应的月份是否有这一天
  validDate(year, month, date) {
  	let time = new Date(`${year}-${month}-${date}`);
  	let _year = time.getFullYear();
  	let _month = time.getMonth() + 1;
  	let _date = time.getDate();
  	
  	return _year === year && month === _month && date === _date
  }
  复制代码

  生成当月天数按周分割的数组

  // 生成一个月的天数
  generateCalendar(year, month) {
  	let that = this;
  	let weekLen = new Array(7).fill(''); // 一周七天
  	let weekday = new Date(`${year}-${month}-01`).getDay(); // 1号星期几
  	
  	// 重置
  	this.monthDay = [[], [], [], [], [], []];
  	
  	// 生成一月对齐星期的天数，一周以周日开始
  	weekLen.map((item, index) => {
  		that.monthDay[0].push(
  			index < weekday 
  			? '' 
  			: (index === weekday) 
  				? {year, month, date: 1}
  				: {year, month, date: that.monthDay[0][index-1].date+1}
  		);
  		that.monthDay[1].push({year, month, date: index + (7 - weekday + 1)});
  		that.monthDay[2].push({year, month, date: that.monthDay[1][index].date + 7});
  		that.monthDay[3].push({year, month, date: that.monthDay[2][index].date + 7});
  		if (
  			that.monthDay[3][index].date + 7 <= 31 && 
  			this.validDate(year, month, that.monthDay[3][index].date + 7)
  		) {
  			that.monthDay[4].push({year, month, date: that.monthDay[3][index].date + 7});
  		} else {
  			that.monthDay[4].push('');
  		}
  		if (
  			that.monthDay[4][index].date + 7 <= 31 && 
  			this.validDate(year, month, that.monthDay[4][index].date + 7)
  		) {
  			that.monthDay[5].push({year, month, date: that.monthDay[4][index].date + 7});
  		}
  	})
  }
  
  复制代码

代码

缩进变成4空格了。。。

父组件使用

<cus-calendar 
	class="calendar" 
	:year="monthActive.year" 
	:month="monthActive.month" 
	:saleList="saleList"
	:disabledDate="disabledDate"
	@check-date="checkDate" 
/>
复制代码

其他：

this.disabledDate = ['2019-06-21','2019-06-22','2019-06-23'];
this.saleList = [
	{ date: '2019-06-24', price: 6188 },
	{ date: '2019-06-25', price: 6188 },
	{ date: '2019-06-26', price: 6188 },
	{ date: '2019-07-26', price: 6188 },
	{ date: '2019-06-27', price: 6188 },
	{ date: '2019-06-28', price: 6188 },
];
复制代码

template

<template>
	<view class="calendar-container">
		<view class="month-bg">
			{{ month }}
		</view>
		<view class="week-title">
			<text class="weekend">日</text>
			<text>一</text>
			<text>二</text>
			<text>三</text>
			<text>四</text>
			<text>五</text>
			<text class="weekend">六</text>
		</view>
		
		<view class="calendar-content">
			<view 
				v-for="(week, weekindex) in monthDay"
				:key="weekindex"
				class="week-month"
			>
				<view
					class="date"
					v-for="(date, dateindex) in week"
					:key="dateindex"
					:class="{'date-disabled': beforeToday(date) || disabledDateFn(date)}"
					@tap="dateTap(date)"
				>
					<view 
						class="date-item"
						:class="{
							'date-active': showPrice(date) && isActiveDate(date),
							'date-active date-active2': !showPrice(date) && isActiveDate(date)
						}"
					>
						<text v-if="isToday(date)">今天</text>
						<text v-else>{{ date.date }}</text>
						<view class="price" v-if="showPrice(date)">¥{{ showPrice(date) }}</view>						
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
复制代码

js

// 旅游产品 - 日历
export default {
	name: 'cus-calendar',
	props: {
		theme: {
			type: String,
			default: '#F87D72'
		},
		saleList: {
			type: Array,
			default: () => []
		},
		disabledDate: {
			type: Array,
			default: () => []
		},
		year: {
			type: Number,
			default: () => new Date().getFullYear()
		},
		month: {
			type: Number,
			default: () => new Date().getMonth()+1
		}
	},
	data() {
		return {
			newYear: '',
			newMonth: '',
			monthDay: [[], [], [], [], [], []],
			dateActive: {
				year: '',
				month: '',
				date: ''
			}
		}
	},
	watch: {
		month: {
			handler(val) {
				this.newYear = this.year;
				this.newMonth = this.month;
				this.generateCalendar(this.newYear, this.newMonth);
			},
			immediate: true
		}
	},
	methods: {
		// 验证日期是否有效：对应的月份是否有这一天
		validDate(year, month, date) {
			let time = new Date(`${year}-${month}-${date}`);
			let _year = time.getFullYear();
			let _month = time.getMonth() + 1;
			let _date = time.getDate();
			
			return _year === year && month === _month && date === _date
		},
		// 是否今天
		isToday({ year, month, date }) {
			let time = new Date();
			let _year = time.getFullYear();
			let _month = time.getMonth() + 1;
			let _date = time.getDate();
			
			return year === _year && month === _month && date === _date
		},
		// 今天之前
		beforeToday({ year, month, date }) {
			let time = new Date();
			let _year = time.getFullYear();
			let _month = time.getMonth() + 1;
			let _date = time.getDate();
			
			return year <= _year && month <= _month && date <= _date
		},
		// 禁用的日期
		disabledDateFn({ year, month, date }) {
			month = month < 10 ? (month+'').padStart(2, '0') : month;
			date = date < 10 ? (date+'').padStart(2, '0') : date;
			
			return this.disabledDate.includes(`${year}-${month}-${date}`);
		},
		// 是否选中
		isActiveDate({ year, month, date }) {
			const { month: _month, date: _date } = this.dateActive;
			return month === _month && date === _date;
		},
		// 点击有效的一天
		dateTap({ year, month, date }) {
			this.dateActive = {
				year,
				month,
				date
			};
			this.$emit('check-date', this.dateActive);
		},
		// 日期下面显示价格
		showPrice({ year, month, date }) {
			if (!year) return;
			
			month = month < 10 ? (month+'').padStart(2, '0') : month;
			date = date < 10 ? (date+'').padStart(2, '0') : date;
			
			let obj = this.saleList.find(item => item.date === `${year}-${month}-${date}`);
			return obj && obj.price
		},
		// 生成一个月的天数
		generateCalendar(year, month) {
			let that = this;
				let weekLen = new Array(7).fill(''); // 一周七天
				let weekday = new Date(`${year}-${month}-01`).getDay(); // 1号星期几
				
				// 重置
				this.monthDay = [[], [], [], [], [], []];
				
				// 生成一月对齐星期的天数，一周以周日开始
				weekLen.map((item, index) => {
					that.monthDay[0].push(
						index < weekday 
						? '' 
						: (index === weekday) 
							? {year, month, date: 1}
							: {year, month, date: that.monthDay[0][index-1].date+1}
					);
					that.monthDay[1].push({year, month, date: index + (7 - weekday + 1)});
					that.monthDay[2].push({year, month, date: that.monthDay[1][index].date + 7});
					that.monthDay[3].push({year, month, date: that.monthDay[2][index].date + 7});
					if (
						that.monthDay[3][index].date + 7 <= 31 && 
						this.validDate(year, month, that.monthDay[3][index].date + 7)
					) {
						that.monthDay[4].push({year, month, date: that.monthDay[3][index].date + 7});
					} else {
						that.monthDay[4].push('');
					}
					if (
						that.monthDay[4][index].date + 7 <= 31 && 
						this.validDate(year, month, that.monthDay[4][index].date + 7)
					) {
						that.monthDay[5].push({year, month, date: that.monthDay[4][index].date + 7});
					}
				})
			}
		}
	}
复制代码

css

<style scoped>
	.calendar-container {
		width: 100%;
		position: relative;
		color: #999;
	}
	.month-bg {
		position: absolute;
		top: 50%;
		left: 50%;
		/* color: #fcfcfc; */
		color: #f6f6f6;
		font-size: 60px;
		transform: translate(-50%, -50%);
		z-index: -1;
	}
	.week-title {
		padding: 20upx 40upx;
		display: flex;
		justify-content: space-between;
	}
	.week-title>text {
		flex: 1;
		text-align: center;
	}
	.weekend {
		color: #F87D72;
	}
	.week-month {
		display: flex;
		justify-content: flex-start;
		padding: 20upx 40upx;
		color: #2b2b2b;
	}
	.week-month>.date {
		flex: 14.285% 0 0;
		text-align: center;
	}
	.date-item {
		width: 60upx;
		height: 60upx;
		position: relative;
		left: 50%;
    margin-left: -30upx;
		line-height: 1;
	}
	.date-disabled {
		color: #999;
		pointer-events: none;
	}
	.price {
		color: #F87D72;
		font-size: 18upx;
	}
	.date-active {
		color: #fff;
	}
	.date-active::after {
		content: '';
		width: 140%;
		height: 140%;
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		border-radius: 50px;
		background: linear-gradient(right, #F87D72, #F29E97);
		box-shadow: 0 6upx 16upx -6upx #F97C71;
		z-index: -1;
	}
	.date-active>.price {
		color: #fff;
	}
	.date-active2::after {
		transform: translate(-50%, -68%);
	}
</style>
复制代码