时间控件

199 阅读1分钟

初始化当前月第一天到当月当天

<el-date-picker
            :clearable="true"
            size="small"
            v-model="pickerDateArr"
            type="daterange"
        
     data() {
    return {
      pickerDateArr: [],
      }     
    },
 //初始化时间
        defaultDate(){
          let date = new Date();
          //获取当前时间的年份转为字符串
          let year = date.getFullYear().toString();
          //获取月份,由于月份从0开始,此处要加1,判断是否小于10,如果是在字符串前面拼接'0'
          let month = date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1).toString():(date.getMonth()+1).toString(); 
          //获取天,判断是否小于10,如果是在字符串前面拼接'0'
          let da = date.getDate() < 10 ? '0'+date.getDate().toString():date.getDate().toString(); 
          //字符串拼接,开始时间,结束时间
          let end = year + '-' + month + '-' + da;  //当天'2022-04-08'
          let beg = year + '-' + month + '-01';    //当月第一天'2022-04-01'
          this.pickerDateArr = [beg,end] //将值设置给插件绑定的数据
      },

默认当前月

 //默认当月
    initMonth(){
      if((new Date().getMonth() + 1) < 10){
         this.value2  = new Date().getFullYear() + "-" + '0' + (new Date().getMonth() + 1); 
      }else{
         this.value2  = new Date().getFullYear() + "-" +  (new Date().getMonth() + 1); 

      }

    }

动态改变时间

 let date = new Date()
  // 通过时间戳计算
 let defalutStartTime = date.getTime() - 7 * 24 * 3600 * 1000 // 转化为时间戳
 let defalutEndTime = date.getTime()
 let startDateNs = new Date(defalutStartTime) 
 let endDateNs = new Date(defalutEndTime)
  // 月,日 不够10补0
 defalutStartTime = startDateNs.getFullYear() + '-' + ((startDateNs.getMonth() + 1) >= 10 ? (startDateNs.getMonth() + 1) : '0' + (startDateNs.getMonth() + 1)) + '-' + (startDateNs.getDate() >= 10 ? startDateNs.getDate() : '0' + startDateNs.getDate())
   defalutEndTime = endDateNs.getFullYear() + '-' + ((endDateNs.getMonth() + 1) >= 10 ? (endDateNs.getMonth() + 1) : '0' + (endDateNs.getMonth() + 1)) + '-' + (endDateNs.getDate() >= 10 ? endDateNs.getDate() : '0' + endDateNs.getDate())
this.pickerDateArr = [defalutStartTime,defalutEndTime] //将值设置给插件绑定的数据

时间显示不能超过当天

<el-date-picker
 v-model="value2"
:picker-options="pickerOptions2"
data(){
pickerOptions2: {
        disabledDate: time => {
          if (time.getTime() > new Date().getTime()) {
            return true;
          } else {
            return false;
          }
        }
      },
}