element-ui时间选择器el-date-picker默认当前时间至7天之前时间

vue部分代码：

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

js部分代码：

data(){
  return {
    deviceFormData:{
       time:[]
    },

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

created() {
    if (process.client) {
      const that = this;
      that.getTimeFn();
    }
  },   

//设置默认时间
getTimeFn() {
  const that = this;
  const end = new Date();
  const start = new Date();
  start.setTime(start.getTime() - 3600 * 1000 * 24 * 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-time-picker设置默认赋值时间

Vue项目如何实现文件上传（附完整代码）

Vue开发中最常用的几种UI组件库

vue语法如何设置el-select默认值

el-tree组件如何添加虚线指示

标签： el-date-picker, element-ui

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

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

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