el-date-picker时间选择器默认时间为前7天（15天）

用element框架中的el-date-picker做了一个时间选择器，默认显示的是当天~前7天(或15)的时间差，下面web建站小编给大家介绍一下代码。

el-date-picker组件

<el-date-picker
   :editable="false"
   :clearable="false"
   v-model="dateTime"
   type="daterange"
   range-separator="至"
   start-placeholder="开始日期"
   end-placeholder="结束日期"
   :picker-options="pickerOptions"
   format="yyyy-MM-dd"
   value-format="yyyy-MM-dd">
</el-date-picker>

方法介绍：

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

created() {
  if (process.client) {
    const that = this;
    that.getTimeFn();
  }
},   
methods: {
  //设置默认时间
  getTimeFn() {
    const that = this;
    const end = new Date();
    const start = new Date();
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); //15天把7改掉
    that.deviceFormData.time[0] = that.formatDate(start);
    that.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;
  },
}

el-date-picker默认快捷键代码（禁掉今日之后的时间）

如何利用bootstrap做一个年月日的时间选择器

layDate时间组件的运用（附下载layDate-v5.3.1）

el-time-select赋值失败解决方法（从接口获取值赋值不上去）

修改element-ui源码兼容el-date-picker支持年区间选择

标签： el-date-picker, 时间组件, 时间选择器

上面是“el-date-picker时间选择器默认时间为前7天（15天）”的全面内容，想了解更多关于 vuejs 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_2460.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！