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}`
    },