uni-app实现获取未来七天时间和星期几功能

小董大咖

已于 2023-02-22 09:19:54 修改

阅读量717

点赞数 3

文章标签： uni-app javascript 时间戳前端 vue.js

于 2023-02-17 19:17:45 首次发布

原文链接：https://blog.csdn.net/qq_41956361/article/details/106275292?spm=1001.2101.3001.6650.4&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-4-106275292-blog-129022591.pc_relevant_multi_platform_whitelistv3&depth_1-utm_source=distri

版权

该文章展示了一个Vue.js组件的实现，该组件用于显示当前日期前一周的日期，使用flex布局进行样式设置。每个日期项可被点击，并触发select事件。在组件的生命周期方法中，数据被初始化并格式化，包括计算星期几和处理日期字符串。同时，文章也包含了日期操作函数来获取和格式化日期。

摘要由CSDN通过智能技术生成

例子如下：

html

		<view
			style="margin-top: 3%;width: 100%;height: 10vh;display: flex;justify-content: space-around;">
			<div v-for="(item,index) in same_week" :class="[same_day==item.date? 'activ' :'','dis']"
				@click="select(item)" :key='index'>
				<span style="font-weight: 600;margin-top: 5%;">{{item.week}}</span>
				<br>
				<view style="width:30px;height: 30px;border-radius: 50%;border: none;background-color: #EFEFEF;text-align: center;display: flex;justify-content: center;align-items: center;margin-top: 20%;font-size: 12px;">{{item.name}}</view>

			</div>

生命周期执行

created() {
			// 默认显示当天前一周的数据
			let data = []
			this.start = this.getDay(+7);
			this.end = this.getDay();
			for (let i = 6; i >= 0; i--) {
				data.push(this.getDay(+i))
			}
			var date = data.reverse()
			this.week = date;
			var date = this.week;
			var pkc = []; 
			var weekday = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
			date.forEach((item, index) => { //循坏日期
				var f = new Date(item);
				var week = f.getDay() //计算出星期几
				var str1 = item.split('/');
				var strs = str1[2];

				var weeks = weekday[week] 
				var time = Math.round(new Date(item) / 1000) 
				var s = {} //用于存储每个日期对象
				s.date = item;
				s.name = strs;
				s.week = weeks;
				s.times = time;
				pkc.push(s)
			})
			this.same_week = pkc;
			
			this.same_day = pkc[0].date; 
		},

methods：事件

	getDay(day) {
				var today = new Date();
				var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
				today.setTime(targetday_milliseconds); 
				var tYear = today.getFullYear();
				var tMonth = today.getMonth();
				var tDate = today.getDate();
				tMonth = this.doHandleMonth(tMonth + 1);
				tDate = this.doHandleMonth(tDate);
				return tYear + "/" + tMonth + "/" + tDate;
			},
			doHandleMonth(month) {
				var m = month;
				if (month.toString().length == 1) {
					m = month;
				}
				return m;

			},
			// 

		},

return

                week: [],
				same_week: [], 
				same_day: '',