Use element UI data picker to select date range and set default selection time for one year

In template

<el-date-picker
                    v-model="timedata"
                    type="daterange"
                    size="mini"
                    range-separator="to"
                    start-placeholder="Start date"
                    end-placeholder="End date"
                    value-format="yyyy-MM-dd"
                    class="data-pick"
                    unlink-panels
                  ></el-date-picker>

When selecting the date range, the left and right panels are linked by default. If you want two panels to switch the current month independently, you can use the unlink-panels property to de-link.

Date format
Use format to specify the format of the input box; use value-format to specify the format of the bound value. By default, the component accepts and returns the Date object. If you need to modify the date format, you can refer to the official website configuration item https://element.eleme.io/#/zh-CN/component/date-picker.

In data

data () {
return {
timedata:[]
}

Set default one year in methods

methods: {
   /* Get the past time and pass it to the present time */
    getPassYearFormatDate () {
      var nowDate = new Date()
      var date = new Date(nowDate)
      date.setDate(date.getDate() - 365)
      var seperator1 = '-'
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var strDate = date.getDate()
      if (month >= 1 && month <= 9) {
        month = '0' + month
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = '0' + strDate
      }
      var formatDate = year + seperator1 + month + seperator1 + strDate
      this.getNowFormatDate(formatDate)
    },
    /* Get the present time and accept the value of the past time */
    getNowFormatDate (formatDate) {
      var date = new Date()
      var seperator1 = '-'
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var strDate = date.getDate()
      if (month >= 1 && month <= 9) {
        month = '0' + month
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = '0' + strDate
      }
      var nowData = year + seperator1 + month + seperator1 + strDate
      this.timedata = [formatDate, nowData]  // Default assignment for one year
}
}

Then you can pass the value where you need it, for example:

  beginDate: this.timedata[0],        //Starting time
  endDate: this.timedata[1],          //Termination time

The effect is as follows. At the beginning, there is a default period of one year.

Posted by nwoottonn on Tue, 30 Jul 2019 18:22:38 -0700