el-date-picker周选择器获取选择的日期范围

javascript 复制代码
 <el-date-picker
          v-model="formData.date"
          type="week"
          format="yyyy 第 WW 周"
          placeholder="选择周"
          @change="weekChange"
        >
</el-date-picker>


// 方法一:
 weekChange(val) {
      let startTime = new Date(val.getTime()); //开始时间
      let endTime = new Date(val.getTime() + (24 * 60 * 60 * 1000) * 6); //结束时间
      let timeArr = [startTime.toISOString().slice(0, 10), endTime.toISOString().slice(0, 10)];
      console.log(timeArr)
    },
        
        
// 方法二:
  weekChange(val) {
      let timeStamp = val.getTime(); //标准时间转为时间戳,毫秒级别
      let startTimeStamp = this.getDateTime(timeStamp - 24 * 60 * 60 * 1000); //开始时间
      let endTimeStamp = this.getDateTime(timeStamp + (24 * 60 * 60 * 1000) * 5); //结束时间
      let timeArr = [startTimeStamp, endTimeStamp]
      console.log(timeArr)
    },
    getDateTime(dateTime) {
      var timeStamp = new Date(dateTime)
      var year = 1900 + timeStamp.getYear()
      var month = '0' + (timeStamp.getMonth() + 1)
      var date = '0' + timeStamp.getDate()
      return year + '-' + month.substring(month.length - 2, month.length) + '-' + date.substring(date.length - 2, date.length)
    } 
相关推荐
颜酱12 分钟前
图结构完全解析:从基础概念到遍历实现
javascript·后端·算法
小迷糊的学习记录1 小时前
Vuex 与 pinia
前端·javascript·vue.js
发现一只大呆瓜1 小时前
前端性能优化:图片懒加载的三种手写方案
前端·javascript·面试
不爱吃糖的程序媛1 小时前
Flutter 与 OpenHarmony 通信:Flutter Channel 使用指南
前端·javascript·flutter
利刃大大1 小时前
【Vue】Element-Plus快速入门 && Form && Card && Table && Tree && Dialog && Menu
前端·javascript·vue.js·element-plus
NEXT062 小时前
AI 应用工程化实战:使用 LangChain.js 编排 DeepSeek 复杂工作流
前端·javascript·langchain
光影少年2 小时前
react的hooks防抖和节流是怎样做的
前端·javascript·react.js
小毛驴8502 小时前
Vue 路由示例
前端·javascript·vue.js
发现一只大呆瓜3 小时前
AI流式交互:SSE与WebSocket技术选型
前端·javascript·面试
wuhen_n4 小时前
JavaScript链表与双向链表实现:理解数组与链表的差异
前端·javascript