前端vue实现获取七天时间和星期几功能_前端七天日历-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_41956361/article/details/106275292

本文介绍如何使用Vue.js创建一个展示当前日期前七天的日期和星期几的组件。通过遍历日期并计算星期几，组件能够动态展示日期信息，并提供点击事件选择特定日期。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端vue实现获取七天时间和星期几功能

功能展示

在这里插入图片描述

代码

<div  v-for="(item,index) in same_week" :class="[same_day==item.date? 'activ' :'','dis']"   @click="select(item)" :key='index'>
 <span>{{item.name}}</span>
 <span>{{item.week}}</span>
</div>

在这里插入图片描述
data数据

 week:[],
 same_week:[],//保存当前最新的时间
 same_day:'',//当天的时间

在这里插入图片描述

在vue周期执行

  created() {
    // 默认显示当天前一周的数据
    let data=[]
    this.start=this.getDay(+7);
    this.end=this.getDay();
    for(let i=6;i>=0;i--){
      data.push(this.getDay(+i))
    }
   var date=data.reverse()//得出一周的日期进行排序
   this.week=date;
   var date=this.week;
   var pkc=[];/* 用于存储展示的日期数据 */
   var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
   date.forEach((item,index)=>{//循坏日期
      var f=new Date(item);
      var week=f.getDay()//计算出星期几
    var str1=item.split('/');
    var strs=str1[1]+'/'+str1[2];

      var weeks=weekday[week]/* 将计算出来的时间带入数字得出中文 */
      var time= Math.round(new Date(item) / 1000)//时间戳转换
      var s={}//用于存储每个日期对象
      s.date=item;
      s.name=strs;
      s.week=weeks;
      s.times=time;
      pkc.push(s)
   })
   this.same_week=pkc;
   //pkc存储着今天的年月日星期几，时间戳等
    this.same_day=pkc[0].date;//今天的数据
  },

methods事件

getDay(day){
     　　var today = new Date();
     　　var targetday_milliseconds=today.getTime() + 1000*60*60*24*day;
     　　today.setTime(targetday_milliseconds); //注意，这行是关键代码
     　　var tYear = today.getFullYear();
     　　var tMonth = today.getMonth();
     　　var tDate = today.getDate();
     　　tMonth = this.doHandleMonth(tMonth + 1);
     　　tDate =  this.doHandleMonth(tDate);
     　　return tYear+"/"+tMonth+"/"+tDate;
     },
     doHandleMonth(month){
     　　var m = month;
     　　if(month.toString().length == 1){
       　　m =month;
     　　}
     　　return m;
     　　
     },