elementUI 默认日期 三天前, 三个月前, 一年前

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<template>
<div>
	 <div class="group">
	        <el-select v-model="histype" placeholder="按日期查看" @change="histypeChanged">
	          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
	          </el-option>
	        </el-select>
	  </div>
      <el-form :model="params" ref="params" :inline="true">
        <div class="group">
	          <el-form-item>
		            <el-date-picker v-model="params.date" type="datetimerange" range-separator="~" start-placeholder="开始日期"
		              end-placeholder="结束日期" v-show="dateType=='day'" value-format="yyyy-MM-dd HH:mm:ss"
		              :default-time="['00:00:00', '23:59:59']" @input="immediUpdate">
		            </el-date-picker>
		            <el-date-picker v-model="params.date" type="monthrange" range-separator="至" start-placeholder="开始月份"
		              end-placeholder="结束月份" v-show="dateType=='month'" value-format="yyyy-MM-dd" @input="immediUpdate">
		            </el-date-picker>
		            <el-date-picker v-model="params.date" type="monthrange" range-separator="至" start-placeholder="开始年月"
		              end-placeholder="结束年月" v-show="dateType=='year'" value-format="yyyy-MM-dd" @input="immediUpdate">
		            </el-date-picker>
	          </el-form-item>
       	 </div>
      </el-form>
</div>    
</template>

<script>
   data() {
      return {
        params: {
          date: "",
        },
          options: [{
          value: 'day',
          label: '按日期查看'
        }, {
          value: 'month',
          label: '按月份查看'
        }, {
          value: 'year',
          label: '按年份查看'
        }],
      }
    }

method:{
      histypeChanged(value) {
        console.log(value);
        this.dateType = value;
        if (this.dateType == 'day') {
          this.timeType = 1
        } else if (this.dateType == 'month') {
          this.timeType = 2
        } else if (this.dateType == 'year') {
          this.timeType = 3
        }
        this.params.date = '';
        this.startTime = '';
        this.endTime = '';
        this.getNowTime();
      },
  getNowTime() {
        console.log(this.dateType)
        if (this.dateType == 'day') {
          let curDate = (new Date()).getTime();
          let dayNum = 3 * 24 * 3600 * 1000;
          let threeDays = curDate - dayNum;

          // console.log(this.getLocalTime(curDate), this.getLocalTime(threeDays))
          let sDay = this.getLocalTime(threeDays)
          let end = this.getLocalTime(curDate)
          this.params.date = [sDay, end]
        } else if (this.dateType == 'month') {
          var date = new Date()
          var befdate = date.setMonth(date.getMonth() - 3)
          var bb = new Date(befdate);
          var bDate = this.formatDate(bb); // 时间戳转日期格式

          let curDate = (new Date()).getTime();
          var nDate = this.getLocalTime(curDate);
          nDate = nDate.substring(0, nDate.length - 9)

          // console.log('MMMMMMMMMMM', bDate, nDate)
          this.params.date = [bDate, nDate]
        } else if (this.dateType == 'year') {
          var date = new Date()
          var befdate = date.setMonth(date.getMonth() - 12)
          var bb = new Date(befdate);
          var bDate = this.formatDate(bb); // 时间戳转日期格式

          let curDate = (new Date()).getTime();
          var nDate = this.getLocalTime(curDate);
          nDate = nDate.substring(0, nDate.length - 9)

          // console.log('MMMMMMMMMMM', bDate, nDate)
          this.params.date = [bDate, nDate]
        }

      },

   // 时间戳转日期格式 (精确到 秒)
      add0(m) { return m < 10 ? '0' + m : m },
      getLocalTime(nS) {
        // return new Date(parseInt(nS)).toLocaleString().replace(/:\d{1,2}$/, ' ');
        // return new Date(parseInt(nS)).toLocaleString().replace(/:\d{1,2}$/, ' ');
        //shijianchuo是整数,否则要parseInt转换
        var time = new Date(nS);
        var y = time.getFullYear();
        var m = time.getMonth() + 1;
        var d = time.getDate();
        var h = time.getHours();
        var mm = time.getMinutes();
        var s = time.getSeconds();
        return y + '-' + this.add0(m) + '-' + this.add0(d) + ' ' + this.add0(h) + ':' + this.add0(mm) + ':' + this.add0(s);
      },
      // 时间戳转日期格式 (精确到 天)
      formatDate(now) {
        var year = now.getFullYear();
        var month = now.getMonth() + 1;
        var date = now.getDate();
        if (month >= 1 && month <= 9) {
          month = "0" + month;
        };
        if (date >= 0 && date <= 9) {
          date = "0" + date;
        };
        return year + "-" + month + "-" + date;
      },
      // 日期格式转时间戳
      dateToMs(date) {
        return new Date(date).getTime()
      }
}
</script>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值