一, 获取当前日期

日报 ( {{date}} )


data(){
  return{
     date:""
   }
},

mounted(){
   this.getDate()
}




methods:{
 //获取当前日期的方法
   getDate() {
     var time = new Date()
     console.log(time);
  
     var y = time.getFullYear()    //年
     var m = (time.getMonth() + 1).toString().padStart(2, '0')  //月
     var d = time.getDate().toString().padStart(2, '0')    //日
     var h = time.getHours().toString().padStart(2, '0')    //时
     var mm = time.getMinutes().toString().padStart(2, '0')   //分
     var s = time.getSeconds().toString().padStart(2, '0')     //秒

     this.date = `${y}-${m}-${d}`
  }

}

控制台打印 

页面显示 

二 , 获取当前日期所在周的日期

周报 ( {{weekFirst1}}-{{weekFirst2}} - {{weekEnd1}}-{{weekEnd2}} )




mounted() {
   this.getWeek()
}




// 获取当前日期所在周的日期
   getWeek() {
      var time= new Date()
      var timesStamp = time.getTime();
      var currenDay = time.getDay();
      var weekDates = [];

      for (var i = 0; i < 7; i++) {
        weekDates.push(new Date(timesStamp + 24 * 60 * 60 * 1000 * (i - (currenDay + 6) % 7)).toLocaleDateString()
            .replace(/\//g, '-'));
        }

      console.log(weekDates)

      //自己按需求截取
       this.weekFirst1 = weekDates[0].split('-')[1]
       this.weekFirst2 = weekDates[0].split('-')[2]
       this.weekEnd1 = weekDates[6].split('-')[1]
       this.weekEnd2 = weekDates[6].split('-')[2]

    },

控制台打印

页面显示

三 , 获取所选日期所在周的日期

结合日期选择器 , 用户可以自己选择日期  , 所在周的日期也要跟着所选日期联动变化 

(页面刚开始显示当前日期 , 用第一个方法获取当前日期赋值给date , 这里就不重复写了)

用的vant的日期选择器组件 

日报 ( {{date}} )
<van-icon name="arrow-down" @click="choseTime" />

周报 ( {{weekFirst1}}-{{weekFirst2}} - {{weekEnd1}}-{{weekEnd2}} )


<van-popup v-model="showPicker" position="bottom">
     
  <van-datetime-picker @cancel="showPicker = false" @confirm="onConfirm" v- 
    model="currentDate" type="date"  :min-date="minDate" :max-date="maxDate" />
           
</van-popup>






data(){

  return{
    date:"",
    weekFirst1:"",
    weekFirst2:"",
    weekEnd1:"",
    weekEnd2:"",
    showPicker: false,
    currentDate: new Date(),
    minDate: new Date(2020, 1, 1),
    maxDate: new Date(2131, 12, 30),

  }
}






methods:{

     //获取所选日期所在的周
      getChoseWeek(val) {
        var time= new Date(val)
        var timesStamp = time.getTime();
        var currenDay = time.getDay();
        var weekDates = [];

       for (var i = 0; i < 7; i++) {
        weekDates.push(new Date(timesStamp + 24 * 60 * 60 * 1000 * (i - (currenDay + 6) % 7)).toLocaleDateString()
            .replace(/\//g, '-'));
        }

       console.log(weekDates)

      //自己按需求截取
       this.weekFirst1 = weekDates[0].split('-')[1]
       this.weekFirst2 = weekDates[0].split('-')[2]
       this.weekEnd1 = weekDates[6].split('-')[1]
       this.weekEnd2 = weekDates[6].split('-')[2]

      },

   // 弹出日期选择
      choseTime() {
        this.showPicker = true
      },

   // 选好日期
      onConfirm(val) {
        console.log(val);

        var y = val.getFullYear()
        var m = (val.getMonth() + 1).toString().padStart(2, '0')
        var d = val.getDate().toString().padStart(2, '0')
        this.date = `${y}-${m}-${d}`
        this.showPicker = false

      //调用方法 , 把选好的日期传过去
        this.getChoseWeek(val)
      },

}

页面效果 (所在周的日期会根据所选的日期联动变化)