uniapp日期，上一周，下一周切换，点击中间日期还能通过日历跳转

已于 2024-04-25 09:13:51 修改
阅读量303 收藏 1
点赞数 7
文章标签： vue.js 前端 javascript uni-app
于 2024-04-19 10:17:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49144374/article/details/137955420
版权

uniapp日期，上一周，下一周切换，点击中间日期还能通过日历跳转

因为在网上找不到适合自己的组件，就直接自己手搓了一个，希望能帮到大家。
在页面上要展示周一到周日的时间，并且可以左右切换上一周下一周，还可以通过点击中间日期跳出日历弹窗定点到对应日期的那一周和对应时间，下面是效果图和代码还比较粗糙，可以自己再优化。
在这里插入图片描述
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/dc3ef865f42e43c8aa8ad68f30df64ad.p在这里插入图片描述
ng#pic_center)
代码`在这里插入代码片



课表


	<view class="week-box">
		<button class="week-button week-button-left" size="small" @click="subWeekNumber(year,weekNumber)">
			<u-icon color="rgba(235, 101, 25, 1)" name="play-left-fill" size="30"></u-icon>
		</button>
		<button class="week-view" @click="open">
			{{year+'第'+weekNumber+'周'}}
		</button>
		<button class="week-button week-button-right" size="small" @click="addWeekNumber(year,weekNumber)">
			<u-icon color="rgba(235, 101, 25, 1)" name="play-right-fill" size="30"></u-icon>
		</button>
	</view>
	<view class="view_H">
		<view id="demo1" class="scroll-view-item_H " :class="{ 'scroll-view-item_H-selected': currentIndex ===1  }"
			@click="submitDate(1,weekDateList[0].dateFull)">
			<view class="scroll-view-H-text">
				<text>{{weekDateList[0].date}}</text>
				<text>周一</text>
			</view>

		</view>
		<view id="demo2" class="scroll-view-item_H " :class="{ 'scroll-view-item_H-selected': currentIndex ===2  }"
			@click="submitDate(2,weekDateList[1].dateFull)">
			<view class="scroll-view-H-text">
				<text>{{weekDateList[1].date}}</text>
				<text>周二</text>
			</view>
		</view>
		<view id="demo3" class="scroll-view-item_H " :class="{ 'scroll-view-item_H-selected': currentIndex ===3.  }"
			@click="submitDate(3,weekDateList[2].dateFull)">
			<view class="scroll-view-H-text">
				<text>{{weekDateList[2].date}}</text>
				<text>周三</text>
			</view>
		</view>
		<view id="demo4" class="scroll-view-item_H " :class="{ 'scroll-view-item_H-selected': currentIndex ===4  }"
			@click="submitDate(4,weekDateList[3].dateFull)">
			<view class="scroll-view-H-text">
				<text>{{weekDateList[3].date}}</text>
				<text>周四</text>
			</view>
		</view>
		<view id="demo5" class="scroll-view-item_H " :class="{ 'scroll-view-item_H-selected': currentIndex ===5  }"
			@click="submitDate(5,weekDateList[4].dateFull)">
			<view class="scroll-view-H-text">
				<text>{{weekDateList[4].date}}</text>
				<text>周五</text>
			</view>
		</view>
		<view id="demo6" class="scroll-view-item_H " :class="{ 'scroll-view-item_H-selected': currentIndex ===6  }"
			@click="submitDate(6,weekDateList[5].dateFull)">
			<view class="scroll-view-H-text">
				<text>{{weekDateList[5].date}}</text>
				<text>周六</text>
			</view>
		</view>
		<view id="demo7" class="scroll-view-item_H " :class="{ 'scroll-view-item_H-selected': currentIndex ===0  }"
			@click="submitDate(0,weekDateList[6].dateFull)">
			<view class="scroll-view-H-text">
				<text>{{weekDateList[6].date}}</text>
				<text>周日</text>
			</view>
		</view>
	</view>
	<view>
		<uni-calendar ref="calendar" :multiple="false" class="uni-calendar--hook" :clear-date="true"
			:date="info.date" :insert="info.insert" :lunar="info.lunar" :startDate="info.startDate"
			:endDate="info.endDate" :range="info.range" @confirm="confirm" />
	</view>
	<!-- <view>
		<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="120">
			<view id="demo1" class="scroll-view-item_H ">
				<view class="scroll-view-H-text">
					<text>1月20</text>
					<text>周一</text>
				</view>

			</view>
			<view id="demo2" class="scroll-view-item_H ">
				<view class="scroll-view-H-text">
					<text>1月21日</text>
					<text>周二</text>
				</view>
			</view>
			<view id="demo3" class="scroll-view-item_H ">
				<view class="scroll-view-H-text">
					<text>1月22日</text>
					<text>周三</text>
				</view>
			</view>
			<view id="demo4" class="scroll-view-item_H ">
				<view class="scroll-view-H-text">
					<text>1月23日</text>
					<text>周四</text>
				</view>
			</view>
			<view id="demo5" class="scroll-view-item_H ">
				<view class="scroll-view-H-text">
					<text>1月24日</text>
					<text>周五</text>
				</view>
			</view>
			<view id="demo6" class="scroll-view-item_H ">
				<view class="scroll-view-H-text">
					<text>1月25日</text>
					<text>周六</text>
				</view>
			</view>
			<view id="demo7" class="scroll-view-item_H ">
				<view class="scroll-view-H-text">
					<text>1月26日</text>
					<text>周日</text>
				</view>
			</view>
		</scroll-view>
	</view> -->
	<view class="">
		<uni-section class="mb-10" title="今日课程"></uni-section>
	</view>
	<view v-if="classScheduleList.length>0" class="steps-box" v-for="(item,index) in classScheduleList"
		:key="index">
		<view class="steps-y">
			<u-icon name="clock" color="rgba(166, 166, 166, 1)" size="24"></u-icon>
			<p><u-icon class="rotate-90" name="more-dot-fill" color="rgba(166, 166, 166, 1)" size="24"></u-icon>
			</p>
			<p><u-icon class="rotate-90" name="more-dot-fill" color="rgba(166, 166, 166, 1)" size="24"></u-icon>
			</p>
			<p><u-icon class="rotate-90" name="more-dot-fill" color="rgba(166, 166, 166, 1)" size="24"></u-icon>
			</p>
			<p><u-icon class="rotate-90" name="more-dot-fill" color="rgba(166, 166, 166, 1)" size="24"></u-icon>
			</p>
			<p><u-icon class="rotate-90" name="more-dot-fill" color="rgba(166, 166, 166, 1)" size="24"></u-icon>
			</p>
		</view>
		<view class="steps-time">
			<p>{{extractTime(item.startTime)}}</p>
			<p>-</p>
			<p>{{extractTime(item.endTime)}}</p>
		</view>
		<view class="steps-card">
			<uni-card :is-shadow="true" style="width: 540rpx;">
				<view class="card-tile">
					<view class="card-tile-left">
						<text>{{item.studentName}}</text>
					</view>
					<view class="card-tile-right">
						<image src="../../static/home/teacher.png" style="width: 40rpx; height: 40rpx;"></image>
						<text>{{item.teacherName}}</text>
					</view>
				</view>
				<view class="card-body">
					<text>课程：</text>
					<text style="color: rgba(13, 13, 13, 1);">{{item.bookName}}</text>
				</view>
				<view class="card-bottom">
					<view class="switch-box">
						<text style="margin-right: 15rpx;">老师就位</text>
						<view class="" @click="teacherSwitchClick(item.disabledTeacher)">
							<u-switch v-model="item.checkedTeacher" size="20" :disabled="item.disabledTeacher"
								@change="changeTeacher(item.id,1)" active-color="rgba(235, 101, 25, 1)"
								inactive-color="rgba(222, 222, 222, 1)"></u-switch>
						</view>
					</view>
					<view class="switch-box">
						<text style="margin-right: 15rpx;">学生就位</text>
						<view class="" @click="studentSwitchClick(item.disabledStudent)">
							<u-switch v-model="item.checkedStudent" size="20" :disabled="item.disabledStudent"
								@change="changesSudent(item.id,0)" active-color="rgba(235, 101, 25, 1)"
								inactive-color="rgba(222, 222, 222, 1)"></u-switch>
						</view>

					</view>
				</view>
			</uni-card>
		</view>
	</view>
	<view class=""  v-if="classScheduleList.length<=0">
		<u-empty text="暂无数据" mode="list" icon="../../static/数据为空.png">
			
		</u-empty>
	</view>
</view>
weixin_49144374
关注
  • 7
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue uniapp 日期获取对应的星期几的中文方法
beyond520lin的博客
05-08 138
通过引入weekDays对象存储星期几的映射关系，并使用dateCache对象缓存已经创建的Date对象，可以简化代码并提高性能。
uniapp 好用的一款日历插件，适合做考勤打卡功能
Rio_Gaven的博客
03-27 851
【代码】uniapp 好用的一款日历插件，适合做考勤打卡功能。
uniapp获取一周日期和星期
m0_73481765的博客
09-19 1172
接下来，我们使用一个循环来获取接下来一周的每天日期和星期几，将它们存储在一个数组中，并将这些值输出到控制台。在循环中，我们使用getTime方法获取当前日期的毫秒数，并加上一天的时间差（24小时 * 60分钟 * 60秒 * 1000毫秒），以获取下一个日期的毫秒数。然后，我们使用Date对象将这个毫秒数转换为日期，并使用前面的方法获取日期、月份、年份和星期几，将它们存储在一个对象中，并添加到数组中。在上面的代码中，我们首先使用Date对象获取当前日期和星期几，并使用getDay方法获取星期几的索引。
uni-app实现周选择器
zd_88888的博客
07-21 842
使用uni-app实现周选择器 根据年份动态计算
uni-app 自定义组件周选择器
最新发布
frewtyh的博客
04-10 295
利用uni-popup,picker-view 实现周选择器。
uniapp获取本周的所有日期（直接cv）
精通前端技术，了解后端接口
01-20 560
【代码】uniapp获取本周的所有日期（直接cv）
uniapp上一周，下一周demo效果（整理）
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
03-21 292
uniapp上一周，下一周demo效果
微信小程序uniapp日历组件，可以自定义文案，可以上下滑动选择日期
03-01
当用户点击某一天的日期格子时，会触发相应的点击事件，开发者可以在事件处理器中获取选中的日期，并更新数据模型。 5. **样式定制**：uni-app支持CSS样式定制，开发者可以修改日历组件的背景色、字体颜色、边框等...
js获取当前周、上一周、下一周日期
10-20
点击“上一周”按钮时，`setDate`函数被调用，并传入`addDate(currentFirstDate,-7)`，即当前日期减去7天，以获取上一周的星期一开始的日期。点击“下一周”按钮时，传入`addDate(currentFirstDate,7)`，获取下一周...
uniapp滑动周组件
07-08
uniapp滑动周组件
Android获取一周每一天日期的源码
10-11
以下是如何使用`LocalDate`和`DayOfWeek`类来获取一周日期的示例： ```java import java.time.LocalDate; import java.time.DayOfWeek; import java.util.ArrayList; import java.util.List; public class ...
uniapp日历打卡，开箱即用可内嵌到项目中
02-23
uniapp日历打卡，开箱即用，可内嵌到项目中，也可直接打包安装，无需登录，数据存储在手机中，无需安装数据库。
uniapp、小程序自定义选择日、周、月、季、年的时间选择器组件
zh626678的博客
01-23 3582
自定义选择日、周、月、季、年的日期选择器组件
uni-app实现获取未来七天时间和星期几功能
每天都想吃好吃的
09-26 594
【代码】uni-app实现获取未来七天时间和星期几功能。
uniapp-实现、按月 - 按周、选择日期
m0_73324389的博客
03-31 3138
uniapp 按月按周选择日期
uniapp获取7天日期和周几
weixin_48299475的博客
02-22 1927
uniapp获取7天日期和周几 // 获取7天 getWeekqq(dateString) { var weekDay = ["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]; var myDate = new Date(Date.parse(dateString)); return weekDay[myDate.getDay()] }, getTime() { var date = new Date();
uniapp 通过左右按钮以天/周为单位选择时间
weixin_48723882的博客
03-11 270
/ 当前的日期或周的显示// 切换时间单位的数据title: '每天',id: 0},title: '每周',id: 1],// 当前的单位的索引。
uniapp日历的上下拉切换周月
06-26
此外，日历组件还支持手动选择日期，可以通过点击日历上的日期来切换到对应的日期视图。在日期视图中，可以查看当天的日程，并进行添加、编辑、删除等操作。 总之，Uniapp日历组件提供了方便灵活的周月切换功能，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值