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)
    } 
相关推荐
Younglina25 分钟前
一个纯前端的网站集合管理工具
前端·vue.js·chrome
木头程序员26 分钟前
前端(包含HTML/JavaScript/DOM/BOM/jQuery)基础-暴力复习篇
开发语言·前端·javascript·ecmascript·es6·jquery·html5
哈__35 分钟前
React Native 鸿蒙跨平台开发:PixelRatio 实现鸿蒙端图片的高清显示
javascript·react native·react.js
wszy18091 小时前
外部链接跳转:从 App 打开浏览器的正确姿势
java·javascript·react native·react.js·harmonyos
pas1361 小时前
31-mini-vue 更新element的children
前端·javascript·vue.js
码界奇点2 小时前
基于Vue3与TypeScript的后台管理系统设计与实现
前端·javascript·typescript·vue·毕业设计·源代码管理
计算机程序设计小李同学2 小时前
婚纱摄影集成管理系统小程序
java·vue.js·spring boot·后端·微信小程序·小程序
ashcn20012 小时前
水滴按钮解析
前端·javascript·css
爱吃奶酪的松鼠丶2 小时前
React长列表,性能优化。关于循环遍历的时候,key是用对象数据中的ID还是用索引
javascript·react.js·性能优化
xkxnq2 小时前
第二阶段:Vue 组件化开发(第 17天)
javascript·vue.js·ecmascript