web建站教程
     
  1. 首页
  2. 前端UI组件库
  3. AI项目和框架
  4. AIGC工具
  5. 百度echarts
  6. 地图大全
  7. 前端知识
  8. 更多
    vuejs
    js入门
    php入门
    mysql
    wordpress
    织梦cms
    帝国cms
    git教程
    IT知识
    模板大全
    休息站
    AI应用

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

55 ℃

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://ipkd.cn/webs_30937.html

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

当前位置: 首页 > vuejs
Trae:新一代免费的AI编程工具

呱呱工具箱

一款免费的在线小工具,无需下载,打开即可使用!呱呱工具箱

在线育儿补贴计算器

快来看看你到底可以领到多少补贴!生活小工具
上一篇:
下一篇:
x 打工人ai神器