web建站教程
  1. 首页
  2. vuejs
  3. js
  4. 好玩
  5. seo教程
  6. 前端知识
  7. 百度echarts
  8. 更多
    php入门
    nodejs
    mockjs
    reactjs
    mysql
    wordpress
    织梦cms
    帝国cms
    git教程
    IT知识
    模板大全
    休息站

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

1626 ℃
           

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

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

当前位置: 网站首页 > vuejs
本文共计987个字,预计阅读时长7分钟
生活小工具,收录了80多款小工具
上一篇: 介绍几款带有中国风古韵的免费可商用中文字体
下一篇: 推荐9款支持 Vue3 免费开源的前端 UI 组件库
x 打工人ai神器