zoukankan      html  css  js  c++  java
  • element ui 中的时间选择器怎么设置默认值/el-date-picker区间选择器怎么这是默认值


    template代码

          <el-date-picker
              value-format="yyyy-MM-dd"
              v-model="search.date"
              type="daterange"
              align="right"
              placeholder="选择日期范围"
              :default-value="this.search.date"
              :picker-options="pickerOptions"
              range-separator=" ~ ">
            </el-date-picker>
    

    顺遍po一个data里面的相关代码,下面的是看你日期选择器的需求哦~

            search: {
              date:[],
              beginDate: '',
              endDate: ''
            },
            pickerOptions: {
              shortcuts: [{
                text: '今天',
                onClick(picker) {
                  const end = new Date();
                  end.setHours(23, 59, 59);
                  const start = new Date(end);
                  start.setTime(end.getTime() - 3600 * 1000 * 24 + 1000);
                  picker.$emit('pick', [start, end]);
                }
              }, {
                text: '最近一周',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  end.setHours(23, 59, 59);
                  start.setTime(end.getTime() - 3600 * 1000 * 24 * 7 + 1000);
                  picker.$emit('pick', [start, end]);
                }
              }, {
                text: '最近一个月',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  end.setHours(23, 59, 59);
                  start.setTime(end.getTime() - 3600 * 1000 * 24 * 30 + 1000);
                  picker.$emit('pick', [start, end]);
                }
              }, {
                text: '最近三个月',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  end.setHours(23, 59, 59);
                  start.setTime(end.getTime() - 3600 * 1000 * 24 * 90 + 1000);
                  picker.$emit('pick', [start, end]);
                }
              }, {
                text: '最近一年',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  end.setHours(23, 59, 59);
                  start.setTime(end.getTime() - 3600 * 1000 * 24 * 365 + 1000);
                  picker.$emit('pick', [start, end]);
                }
              }]
            },
    

    重点来了 设置时间的区间选择器主要是要在 :default-value=""里面去设置一个数组
    我这里的数据就是this.search.date,先设置一个空数组,然后在created里面把日期push 进去

       created () {
          this.search.beginDate = this.handleTimeOld(new Date()) //2012-12-1   handleTimeOld是我用来获取当月的第一天的
          this.search.endDate = this.handleTimeNew(new Date()) //2012-12-1 handleTimeNew是获取今天的日期
          this.search.date.push(this.search.beginDate) 
          this.search.date.push(this.search.endDate)
          this.fetchData()
        }
    
    

    上面的就可以了~~~~~能够设置默认值了
    下面的是获取日期的方法

          handleTimeOld (time, split) {  //是我用来获取当月的第一天的
            let date = new Date(time)
            let year = date.getFullYear()
            let month = date.getMonth() + 1
            split = '-'
            return [year, month, 1].map(num => this.formatNumber(num)).join(split)
          },
          handleTimeNew (time) { //handleTimeNew是获取今天的日期
            let date = new Date(time)
            let year = date.getFullYear()
            let month = (date.getMonth() + 1) > 10 ? (date.getMonth() + 1) : ('0' + (date.getMonth() + 1))
            let day = date.getDate() > 10 ? date.getDate() : ('0' + date.getDate())
            return `${year}-${month}-${day}`
          }
    

    下面加上数据格式化

     formatNumber(number) {
          return String(number)[1] ? String(number) : `0${number}`
        },
    
  • 相关阅读:
    还来一篇说下json_value 以及 json_query 的应用 (3)
    继续说一下openjson 以及 json path 的使用 (2)
    浅谈数据库资源使用的按需分配方法
    AlwaysON同步的原理及可用模式
    AlwaysON同步性能监控的三板斧
    为什么完整备份不能截断事务日志
    解读SQL 内存数据库的细节
    收缩SQL Server日志不是那么简单的(翻译)
    没有了SA密码,无法Windows集成身份登录,DBA怎么办?
    数据库错误日志惹的祸
  • 原文地址:https://www.cnblogs.com/antyhouse/p/10049609.html
Copyright © 2011-2022 走看看