element UI 时间选择器,显示默认时间为当前时间至7天之前时间 (并格式化日期-年月日,时分秒)

67 篇文章 1 订阅
51 篇文章 0 订阅

1.template中使用:

        <el-form-item>
            <date-range-picker
              v-model="deviceFormData.time"
              class="date-item"
              :start-placeholder="$t('NeoLight.startTime')"
              :end-placeholder="$t('NeoLight.endTime')"
              value-format="yyyy-MM-dd"
              :picker-options="pickerOptions"
            />
          </el-form-item>

2.data中定义:

  data() {
    return {
      deviceFormData: {
        time: [],
      },
         //不能选择当前日期之后的时间
    pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
  }
    };
  },

3.methods方法:
![在这里插入图片描述](https://img-blog.csdnimg.cn/e8e2573c919f43bfa9279d4ab848a32d.png
在这里插入图片描述

   created() {
    this.getTimeFn();
  },
 
    // 设置默认时间
    getTimeFn() {
      const that = this;
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      this.deviceFormData.time[0] = that.formatDate(start);
      this.deviceFormData.time[1] = that.formatDate(end);
    },
    
    // 格式化时间
    formatDate(date) {
      var myyear = date.getFullYear();
      var mymonth = date.getMonth() + 1;
      var myweekday = date.getDate();

      if (mymonth < 10) {
        mymonth = "0" + mymonth;
      }
      if (myweekday < 10) {
        myweekday = "0" + myweekday;
      }
      return myyear + "-" + mymonth + "-" + myweekday;
    },

4.实现效果:
在这里插入图片描述

小tips 时 分 秒 格式化时间

在这里插入图片描述

/**
     * 格式化时间 到 时 分 秒
     */
formatDate(date) {
      var myyear = date.getFullYear();
      var mymonth = date.getMonth() + 1;
      var myweekday = date.getDate();
      var h = date.getHours();
      if (mymonth < 10) {
        mymonth = "0" + mymonth;
      }
      if (myweekday < 10) {
        myweekday = "0" + myweekday;
      }

      h = h < 10 ? "0" + h : h;
      var m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      var s = date.getSeconds();
      s = s < 10 ? "0" + s : s;

      return (
        myyear + "-" + mymonth + "-" + myweekday + " " + h + ":" + m + ":" + s
      );
    },
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值