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

效果图:

代码

<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-input
                  type="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 + 1
      let weeksAgo = this.i
      let 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 的值加 1
      let weeksAgo = this.y
      let 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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/111824.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

使用 Docker 部署高可用 MongoDB 分片集群

使用 Docker 部署 MongoDB 集群 Mongodb 集群搭建 mongodb 集群搭建的方式有三种&#xff1a; 主从备份&#xff08;Master - Slave&#xff09;模式&#xff0c;或者叫主从复制模式。副本集&#xff08;Replica Set&#xff09;模式。分片&#xff08;Sharding&#xff09;…

网络协议--TCP的超时与重传

21.1 引言 TCP提供可靠的运输层。它使用的方法之一就是确认从另一端收到的数据。但数据和确认都有可能会丢失。TCP通过在发送时设置一个定时器来解决这种问题。如果当定时器溢出时还没有收到确认&#xff0c;它就重传该数据。对任何实现而言&#xff0c;关键之处就在于超时和重…

Mac 上安装 Emscripten

背景&#xff1a;Web 端需要使用已有的 C 库&#xff0c;需要将 C 项目编译成 WebAssembly(.wasm) 供 js 调用。 Emscripten 可以将 C 编译成 .wasm 一、下载源码 # 下载 emsdk 源码 git clone https://github.com/emscripten-core/emsdk.git# 下载完成后进入到 emsdk 项目根…

2021-arxiv-LoRA Low-Rank Adaptation of Large Language Models

2021-arxiv-LoRA Low-Rank Adaptation of Large Language Models Paper: https://arxiv.org/abs/2106.09685 Code: https://github.com/microsoft/LoRA 大型语言模型的LoRA低秩自适应 自然语言处理的一个重要范式包括对通用领域数据的大规模预训练和对特定任务或领域的适应。…

不容错过的2023年度线框图工具Top 8

线框图工具可以快速呈现设计师的灵感。在任何项目的开始阶段&#xff0c;选择一个方便的线框图工具都是最好的选择。如今&#xff0c;线框图工具的出现并不夸张。各种工具都很容易获得&#xff0c;但选择太多确实很容易给设计师的选择带来困难。 买东西都讲性价比&#xff0c;…

电商课堂|5分钟了解电商数据分析完整流程,建议收藏!

账户效果下降&#xff0c;如何能够快速找到问题并优化调整&#xff1f; 相信百分之90%的竞价员都会说&#xff1a;“做数据分析。” 没错&#xff0c;数据分析能够帮助我们快速锁定问题所在&#xff0c;确定优化方向&#xff0c;还可以帮助我们找到流量控制的方向。那么做电商&…

[RISC-V]verilog

小明教IC-1天学会verilog(7)_哔哩哔哩_bilibili task不可综合&#xff0c;function可以综合

206.反转链表

206.反转链表 力扣题目链接(opens new window) 题意&#xff1a;反转一个单链表。 示例: 输入: 1->2->3->4->5->NULL 输出: 5->4->3->2->1->NULL 双双指针法&#xff1a; 创建三个节点 pre(反转时的第一个节点)、cur(当前指向需要反转的节点…

CodeWhisperer 初体验-手把手教导 给你飞一般的体验!

文章作者&#xff1a;燛衣 CodeWhisperer 有以下几个主要用途&#xff1a; 解决编程问题&#xff1a;CodeWhisperer 可以帮助您解决遇到的编程问题。您可以描述您的问题或需求&#xff0c;CodeWhisperer 将尽力提供相关的解决方案、代码示例或建议。无论您是遇到了语法错误、逻…

2023年十大地推网推拉新接单平台,都是一手单和官方渠道

2023年做拉新推广的地推人员&#xff0c;一定不要错过这十个接单平台&#xff0c;助你轻松找到一手单&#xff0c;这10个平台分别是&#xff1a; &#xff08;主推&#xff1a;聚量推客&#xff09; 我们也拿到了一手邀请码&#xff1a;000000 1&#xff1a;聚量推客 “聚量推…

【LeetCode】每日一题 2023_11_1 参加会议的最多员工数(没做出来)

文章目录 刷题前唠嗑题目&#xff1a;参加会议的最多员工数题目描述代码与解题思路纳入收藏夹 结语 刷题前唠嗑 好好好&#xff0c;这么玩是吧&#xff0c;11 月刚准备开始刷每日一题&#xff0c;就给我来了一道 hard&#xff0c;我连题目都看不懂他在讲些什么&#xff0c;但是…

YApi接口管理平台远程代码执行漏洞复现

一、简介 YAPI是由去哪儿网移动架构组(简称YMFE&#xff0c;一群由FE、iOS和Android工程师共同组成的最具想象力、创造力和影响力的大前端团队)开发的可视化接口管理工具&#xff0c;是一个可本地部署的、打通前后端及QA的接口管理平台。YAPI旨在为开发、产品和测试人员提供更优…

CVE-2018-8174 IE浏览器远程代码执行漏洞

一、漏洞简介 该漏洞影响最新版本的IE浏览器及使用了IE内核的应用程序。用户在浏览网页或打开Office文档时都可能中招&#xff0c;最终被黑客植入后门木马完全控制电脑。微软在4月20日早上确认此漏洞&#xff0c;并于5月8号发布了官方安全补丁&#xff0c;对该0day漏洞进行了修…

【数智化案例展】江苏兴达——智昌蜂脑平台助力产业数智化腾飞

‍ 智昌集团案例 本项目案例由智昌集团投递并参与数据猿与上海大数据联盟联合推出的《2023中国数智化转型升级创新服务企业》榜单/奖项”评选。 ‍数据智能产业创新服务媒体 ——聚焦数智 改变商业 江苏兴达钢帘线股份有限公司是子午线轮胎用钢帘线的专业生产商&#xff0c;经…

【java学习—十一】注解:Annotation(3)

文章目录 1. 相关概念2. 基本的Annotation3. 自定义Annotation 注意&#xff1a;注解这部分内容&#xff0c;了解即可 1. 相关概念 从 JDK 5.0 开始 , Java 增加了对元数据 (MetaData) 的支持 , 也就是 Annotation( 注释 )Annotation 其实就是代码里的特殊标记 , 这些标记可以…

爱写bug的小邓程序员个人博客

博客网址: http://www.006969.xyz 欢迎来到我的个人博客&#xff0c;这里主要分享我对于前后端相关技术的学习笔记、项目实战经验以及一些技术感悟。 在我的博客中&#xff0c;你将看到以下主要内容&#xff1a; 技术文章 我将会分享我在学习前后端技术过程中的一些感悟&am…

chorme安装esay scholar及chrome 无法从该网站添加应用、扩展程序和用户脚本解决方案

问题描述 如题&#xff0c;博主想安装easy scholar用于查询论文的分区&#xff0c;结果安装了半天一直出现chrome 无法从该网站添加应用、扩展程序和用户脚本解决方案的问题。 解决方案 先从这个网址下载&#xff1a;https://www.easyscholar.cc/download 然后对下载好的文…

Spring源码分析篇一 @Autowired 是怎样完成注入的?究竟是byType还是byName亦两者皆有

1. 五种不同场景下 Autowired 的使用 第一种情况 上下文中只有一个同类型的bean 配置类 package org.example.bean;import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration;Configuration public class FruitCo…

tbh Cutter切割节点

在tbh过程中&#xff0c;如果想把一个元素置为一个位图图片某个图像的后边&#xff0c;如何做呢&#xff1f; 如&#xff1a;把圆形放到花的后边&#xff1a; 最后实现效果&#xff1a;&#xff08;请忽略边缘的细节&#xff0c;这里只是记录用法&#xff09; 第一步&#xf…

2023大湾区粤港澳金融数学建模思路代码分享

首先非常建议大家仔细的阅读这个题的题目介绍&#xff0c;还有附赠的就是那个附件里的那几篇材料&#xff0c;我觉得你把这些内容读透理解了&#xff0c;就可以完成至少第一、第二、第三问&#xff0c;嗯&#xff0c;好。然后对于题目里它主要第一部分给出了常用的估值模型&…