vue 获取上一周和获取下一周的日期时间

news/2024/10/24 9:20:49/

效果图:

代码: 

<template><div><div style="padding: 20px 0;"><div style="margin-left: 10px; border-left: 5px solid #0079fe; font-size: 22px; font-weight: 600; padding-left: 10px">工作计划</div><div style="margin-left: 50px; padding-right: 50px; margin-right: 50px"><div style="display:flex; justify-content: center; margin-top: 5vh; margin-bottom: 5vh; align-items: center"><div style="cursor: pointer; background-color: #39b54a; padding: 10px 50px 11px; border-radius: 20px; color: #fff; margin-right: 15px" @click="getPreviousWeekDates">上一周</div><div style=" cursor: pointer; background-color: #0081ff; padding: 11px 50px 10px; border-radius: 20px; color: #fff" @click="getNextWeekDates">下一周</div></div><div><table id="myTable"><tr><th style="width: 70px; position: relative"><div class="ss"></div></th><th v-for="item in nowDate" :key="item.nyr"><div style="font-size: 18px">{{ item.nyr }}</div><div style="font-size: 16px">{{item.xq }}</div></th></tr><tbody><tr><td rowspan="8" style="background-color: #d7d7d7; width: 50px;">账号姓名</td><td rowspan="8" v-for="item in nowDate" :key="item.nyr"><el-inputtype="textarea":rows="17"@blur="fsqq"placeholder="请输入内容"v-model="item.content"></el-input></td></tr></tbody></table></div></div></div></div>
</template><script>
export default {name: 'index',data() {return {nowDate: [],i: 0,y: 0,syz: [],xyz: []}},mounted() {this.getWeekDates();let width= window.innerWidth;console.log(width)},methods: {fsqq() {},getWeekDates() {let date = new Date()let day = date.getDay()let diff = date.getDate() - day + (day === 0 ? -6 : 1) // 获取所在周的第一天let weekStart = new Date(date.setDate(diff))let weekDates = []for (let i = 0; i < 7; i++) {let currentDate = new Date(weekStart)currentDate.setDate(weekStart.getDate() + i)weekDates.push(currentDate)}weekDates.forEach((date) => {let year = date.getFullYear()let month = (date.getMonth() + 1).toString().padStart(2, '0')let day = date.getDate().toString().padStart(2, '0')let dayOfWeek = new Intl.DateTimeFormat('zh-CN', { weekday: 'long' }).format(date)console.log(year + '-' + month + '-' + day + ' (' + dayOfWeek + ')')this.nowDate.push({nyr: year + '-' + month + '-' + day,xq: dayOfWeek})})},getPreviousWeekDates() {this.nowDate = [];this.syz = []if (this.y > 0) {this.y = this.y - 1}this.i = this.i + 1let weeksAgo = this.ilet today = new Date()if (this.xyz.length > 0) {today = new Date(this.xyz[0].nyr)}let firstDayOfWeek = today.getDate() - today.getDay() + (today.getDay() === 0 ? -6 : 1) // 获取本周的第一天let startingDate = new Date(today.setDate(firstDayOfWeek))let weekDates = []for (let i = 0; i < weeksAgo; i++) {startingDate.setDate(startingDate.getDate() - 7) // 递减起始日期for (let j = 0; j < 7; j++) {let currentDate = new Date(startingDate)currentDate.setDate(startingDate.getDate() + j)weekDates.push(currentDate)}}let remaining = []if (this.i > 1) {remaining = weekDates.slice((this.i - 1) * 7)} else {remaining = weekDates}remaining.forEach((date) => {let year = date.getFullYear()let month = (date.getMonth() + 1).toString().padStart(2, '0')let day = date.getDate().toString().padStart(2, '0')let dayOfWeek = new Intl.DateTimeFormat('zh-CN', { weekday: 'long' }).format(date)this.syz.push({nyr: year + '-' + month + '-' + day,xq: dayOfWeek})this.nowDate.push({nyr: year + '-' + month + '-' + day,xq: dayOfWeek})console.log(year + '-' + month + '-' + day + ' (' + dayOfWeek + ')')// console.log(this.syz)})return weekDates},getNextWeekDates() {this.xyz = [];this.nowDate = [];if (this.i > 0) {this.i = this.i - 1}this.y = this.y + 1 // 将 this.i 的值加 1let weeksAgo = this.ylet today = new Date()if (this.syz.length > 0) {today = new Date(this.syz[6].nyr)}let firstDayOfWeek = today.getDate() - today.getDay() + (today.getDay() === 0 ? -6 : 1) // 获取本周的第一天let startingDate = new Date(today.setDate(firstDayOfWeek))let weekDates = []for (let i = 0; i < weeksAgo; i++) {startingDate.setDate(startingDate.getDate() + 7) // 递增起始日期for (let j = 0; j < 7; j++) {let currentDate = new Date(startingDate)currentDate.setDate(startingDate.getDate() + j)weekDates.push(currentDate)}}let remaining = []if (this.y > 1) {remaining = weekDates.slice((this.y - 1) * 7) // 获取下一周的日期} else {remaining = weekDates}remaining.forEach((date) => {let year = date.getFullYear()let month = (date.getMonth() + 1).toString().padStart(2, '0')let day = date.getDate().toString().padStart(2, '0')let dayOfWeek = new Intl.DateTimeFormat('zh-CN', { weekday: 'long' }).format(date)this.xyz.push({nyr: year + '-' + month + '-' + day,xq: dayOfWeek})// console.log(this.xyz)this.nowDate.push({nyr: year + '-' + month + '-' + day,xq: dayOfWeek})console.log(year + '-' + month + '-' + day + ' (' + dayOfWeek + ')')})return weekDates}}
}
</script>
<style scoped>.ss {content: "";position: absolute;width: 1px;height:164px; 需要手调 ,线的长度 top: 1px;  需要手调 ,线的位置left: -5px;background-color: white;display: block;transform: rotate(-57deg);transform-origin: top;
}table {width: 80vw;border-collapse: collapse;border: 2px #797979 solid;
}th, td {padding: 10px;width: 100px;border: 2px #797979 solid;text-align: center;
}th {height: 10vh;background-color: #d7d7d7;
}td {height: 40vh;
}#operButton {position: absolute;left: 600px;top: 100px;
}#operButton button {width: 100px;height: 50px;
}</style>

 


http://www.ppmy.cn/news/1194631.html

相关文章

供应商等级:一级、二级和三级供应商之间有什么区别

作为一名专业采购人员&#xff0c;你知道拥有一个可靠且具有成本效益的供应链有多么重要。确保供应链顺利运行的方法之一就是利用供应商分级。 什么是供应商分级&#xff1f; 供应商分级是根据供应商的绩效和对企业的重要性&#xff0c;对其进行分类的做法。 因此&#xff0c…

一个使用uniapp+vue3+ts+pinia+uview-plus开发小程序的基础模板

uniappuviewPlusvue3tspiniavite 开发基础模板 使用 uniapp vue3 ts pinia vite 开发基础模板&#xff0c;拿来即可使用&#xff0c;不要删除 yarn.lock 文件&#xff0c;否则会启动报错&#xff0c;这个可能和 pinia 的版本有关&#xff0c;所以不要随意修改。 拉取代码…

软件测试之BUG篇(定义,创建,等级,生命周期)

目录 1. BUG 的定义 2. 如何创建 BUG 3. BUG 等级 4. BUG 生命周期 高频面试题&#xff1a; 1. BUG 的定义 当且仅当产品规格书存在且正确时&#xff0c;程序的实现和规格书的要求不匹配时&#xff0c;那就是软件错误。当产品规格说明书没有提到的功能时&#xff0c;以用户…

有关MySQL中的索引

MySQL中的索引是一种用于提高查询性能的数据结构。索引允许数据库引擎更快地定位和访问数据&#xff0c;减少了数据扫描的开销。下面是关于如何在 MySQL 中使用索引的一些重要信息和最佳实践&#xff1a; 创建索引&#xff1a; 在创建表时定义索引&#xff1a;可以在创建表的时…

代码随想录算法训练营第四十二天 | LeetCode 1049. 最后一块石头的重量 II、494. 目标和、474. 一和零

代码随想录算法训练营第四十二天 | LeetCode 1049. 最后一块石头的重量 II、494. 目标和、474. 一和零 文章链接&#xff1a;最后一块石头的重量 II 目标和 一和零 视频链接&#xff1a;最后一块石头的重量 II 目标和 一和零 1. LeetCode 1049. 最后一块石头的重量 II 1.1 思路…

Linux 编译链接那些事儿(02)C++链接库std::__cxx11::basic_string和std::__1::basic_string链接问题总结

1 问题背景说明 在自己的项目源码中引用libeasysqlite.so时编译成功&#xff0c;但运行时遇到问题直接报错&#xff0c;找不到符号 symbol&#xff1a;_ZN3sql5FieldC1ENSt3__112basic_stringIcNS1_11char_traitsIcEENS1_9allocatorIcEEEENS_10field_typeEi。 2 问题描述和解…

【广州华锐互动】风景区规划VR虚拟现实教学系统

风景区规划VR虚拟现实教学系统是一种新兴的教学工具&#xff0c;它可以通过虚拟现实技术&#xff0c;为学生提供一种沉浸式的、实时的、全方位的景区规划体验。 在风景区规划VR虚拟现实教学系统中&#xff0c;学生可以通过虚拟现实技术&#xff0c;实时地与景区进行交互。他们可…

使用vue3+vite+elctron构建小项目介绍Electron进程间通信

进程间通信 (IPC) 是在 Electron 中构建功能丰富的桌面应用程序的关键部分之一。 由于主进程和渲染器进程在 Electron 的进程模型具有不同的职责&#xff0c;因此 IPC 是执行许多常见任务的唯一方法&#xff0c;例如从 UI 调用原生 API 或从原生菜单触发 Web 内容的更改。 在 …