新增日历组件及相关工具函数

components/niu-calendar/niu-calendar.vue

@@ -0,0 +1,200 @@
+<template>
+	<view class="calendar">
+		<view class="calendar-wrapper">
+			<view class="calendar-month">
+				{{curMonth}}月
+			</view>
+			<view class="calendar-daylist">
+				<view v-for="(item,index) in list" @click="chooseDay(index)" class="calendar-daylist-item"
+					:class="[index<todayIndex?'disable':'']">
+					<view class="calendar-daylist-week">
+						{{item| filterWeek}}
+					</view>
+					<view class="calendar-daylist-day" :class="[index==active?'active':'']">
+						{{item| filterDay}}
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+		getNextDay,
+		getBeforeDay,
+		getCurMonthDayNum,
+		getElseMonthDayNum,
+		isSameDay,
+		timeFormat,
+		geRecentDay
+	} from "./util.js"
+	export default {
+		name: "niu-calendar",
+		props: {
+			/**
+			 * 是否立即触发change
+			 */
+			rightnow: {
+				type: Boolean,
+				default: true
+			},
+			// 时间范围
+			day: {
+				type: Number,
+				default: 4 * 7
+			}
+		},
+		filters: {
+			filterWeek: function(time) {
+				let t = new Date(time)
+				let week = t.getDay()
+				let cur = ['日', '一', '二', '三', '四', '五', '六'][week]
+				return cur ? cur : ''
+			},
+			filterYear: function(time) {
+				let t = new Date(time)
+				let year = t.getFullYear()()
+				return year ? year : ''
+			},
+			filterDay: function(time) {
+				let t = new Date(time)
+				let day = t.getDate()
+				return day ? day : ''
+			},
+		},
+		computed: {
+			curYear() {
+				if (this.list[this.active]) {
+					let date = new Date(this.list[this.active])
+					let year = date.getFullYear()
+					return year
+				}
+				return ''
+			},
+			curMonth() {
+				if (this.list[this.active]) {
+					let date = new Date(this.list[this.active])
+					let month = date.getMonth() + 1
+					return month
+				}
+				return ''
+			}
+		},
+		data() {
+			return {
+				active: -1,
+				todayIndex: -1,
+				list: []
+			};
+		},
+		watch: {
+			day: {
+				handler(newValue, oldValue) {
+					console.time("create")
+					const day = geRecentDay(this.day);
+					console.timeEnd("create")
+					this.active = day.index;
+					this.todayIndex = day.index;
+					this.list = day.list;
+					if (this.rightnow) {
+						this.$emit("change", this.list[this.active])
+					}
+				},
+				immediate: true
+			}
+		},
+		methods: {
+			chooseDay(index) {
+				if (this.todayIndex > index) {
+					return;
+				}
+				if (this.active == index) {
+					return;
+				}
+				this.active = index
+				this.$emit("change", this.list[this.active])
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.calendar{
+		
+		.calendar-wrapper {
+			height: 120rpx;
+			overflow: hidden;
+			box-shadow: 0px 5px 5px 0px rgba(87, 139, 255, 0.1);
+			display: flex;
+			align-items: center;
+			.calendar-year{
+				font-size: 40rpx;
+				font-weight: 500;
+				color: #232323;
+			}
+			.calendar-month {
+				height: 80rpx;
+				width: 120rpx;
+				text-align: center;
+				line-height: 80rpx;
+				margin: 20rpx 0;
+				border-right: 2px solid #578BFF;
+				font-size: 40rpx;
+				font-family: PingFang SC;
+				font-weight: 500;
+				color: #232323;
+			}
+		
+			.calendar-daylist {
+				overflow: auto;
+				flex: 1;
+				width: 0;
+				white-space: nowrap;
+				height: 100%;
+		
+				.calendar-daylist-item {
+					height: 100%;
+					display: inline-flex;
+					flex-direction: column;
+					justify-content: center;
+					align-items: center;
+					padding: 0 22rpx;
+		
+					&.disable {
+						.calendar-daylist-week {
+							color: #909090;
+						}
+		
+						.calendar-daylist-day {
+							color: #909090;
+						}
+					}
+		
+					.calendar-daylist-week {
+						font-size: 28rpx;
+						font-weight: 400;
+						color: #232323;
+					}
+		
+					.calendar-daylist-day {
+						margin-top: 10rpx;
+						font-size: 28rpx;
+						font-weight: 400;
+						color: #232323;
+						width: 40rpx;
+						height: 40rpx;
+						text-align: center;
+						padding: 2rpx;
+						border-radius: 50%;
+		
+						&.active {
+							background: #578BFF;
+							color: white;
+						}
+					}
+				}
+			}
+		}
+	}
+</style>

components/niu-calendar/util.js

@@ -0,0 +1,137 @@
+// 明天几号
+export function getNextDay(tempTime) {
+	if (!tempTime) {
+		tempTime = new Date()
+	}
+	tempTime.setHours(24, 0, 0, 0, 0);
+	return tempTime;
+}
+// 昨天几号
+export function getBeforeDay(tempTime) {
+	if (!tempTime) {
+		tempTime = new Date()
+	}
+	tempTime.setHours(-24, 0, 0, 0, 0);
+	return tempTime;
+}
+
+// 获取当前月份应该有多少天
+export function getCurMonthDayNum(time) {
+	if (!time) {
+		time = new Date()
+	}
+	let day = 31;
+	let month = time.getMonth() + 1
+	let year = time.getFullYear()
+	if ([1, 3, 5, 7, 8, 10, 12].indexOf(month) != -1) {
+		day = 31;
+	} else if ([4, 6, 9, 11].indexOf(month) != -1) {
+		day = 30;
+	} else if (year % 4 == 0) {
+		day = 29
+	} else {
+		day = 28
+	}
+	return day
+}
+/**
+ * 或者某个时间在其月份还剩多少天时间
+ * @param {Object} time 时间
+ */
+export function getElseMonthDayNum(time) {
+	if (!time) {
+		time = new Date()
+	}
+	let total = getCurMonthDayNum(time);
+	let day = time.getDate()
+	return total - day;
+}
+/**
+ * 时间格式化
+ */
+export function timeFormat(date, fmt = 'yyyy/MM/dd HH:mm:ss') {
+	if (!date) {
+		return ''
+	}
+	// dayjs
+	if (typeof date === 'string') {
+		date = date.replace('T', ' ').replace('Z', '');
+		date = new Date(date.replace(/-/g, '/'))
+	}
+	if (typeof date === 'number') {
+		date = new Date(date)
+	}
+	var o = {
+		'M+': date.getMonth() + 1,
+		'd+': date.getDate(),
+		'h+': date.getHours() % 12 === 0 ? 12 : date.getHours() % 12,
+		'H+': date.getHours(),
+		'm+': date.getMinutes(),
+		's+': date.getSeconds(),
+		'q+': Math.floor((date.getMonth() + 3) / 3),
+		'S': date.getMilliseconds()
+	}
+	var week = {
+		'0': '\u65e5',
+		'1': '\u4e00',
+		'2': '\u4e8c',
+		'3': '\u4e09',
+		'4': '\u56db',
+		'5': '\u4e94',
+		'6': '\u516d'
+	}
+	if (/(y+)/.test(fmt)) {
+		fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
+	}
+	if (/(E+)/.test(fmt)) {
+		fmt = fmt.replace(RegExp.$1, ((RegExp.$1.length > 1) ? (RegExp.$1.length > 2 ? '\u661f\u671f' : '\u5468') :
+				'') +
+			week[date.getDay() + ''])
+	}
+	for (var k in o) {
+		if (new RegExp('(' + k + ')').test(fmt)) {
+			fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k])
+				.length)))
+		}
+	}
+	return fmt
+}
+
+/**
+ * 获取距离今天多少天的时间
+ * @param {Object} days 据今天的时间长度
+ */
+export function geRecentDay(days, time) {
+	if (!time) {
+		time = new Date()
+	}
+	let dayList = []
+	let curIndex = -1;
+	// 补充这周的前几天时间
+	let bbDay = new Date(time);
+	bbDay.setHours(0, 0, 0, 0);
+	let week = bbDay.getDay() // 当前周几
+	week = (week - 1) < 0 ? 0 : (week - 1)
+	let bList = [];
+	for (var i = week; i >= 0; i--) {
+		let beforeDay = getBeforeDay(bbDay)
+		bList.push(timeFormat(beforeDay))
+		bbDay = beforeDay;
+	}
+	bList.reverse()
+	dayList = dayList.concat(bList)
+	// 时间长度
+	let nnDay = new Date(time);
+	nnDay.setHours(0, 0, 0, 0);
+	curIndex = dayList.length // 今天的索引
+	let elseDay = days || getElseMonthDayNum(nnDay);
+	for (var i = 0; i <= elseDay; i++) {
+		dayList.push(timeFormat(nnDay))
+		let nextDay = getNextDay(nnDay)
+		nnDay = nextDay;
+	}
+	return {
+		list: dayList,
+		index: curIndex
+	}
+}

package.json

@@ -0,0 +1,9 @@
+{
+    "id": "niu-calendar",
+    "name": "时间长度内的日历切换",
+    "version": "0.0.1",
+    "description": "基于项目需要，提供一个简单的日历实现，有差不多的可以用",
+    "keywords": [
+        "日历"
+    ]
+}