elementUI date type selector and partial date conversion

1. The date picker cannot select across years:

<el-date-picker v-model='timerange' :picker-options='rangeoption' type='daterange'
                                  placement='bottom-end'
                                  size='small'
                                  :clearable="false"
                                  style='width: 260px;' range-separator='to'
                                  placeholder='Please select a date range'
                                  start-placeholder='Start date'
                                  end-placeholder='End date'
                                  @change='changeBytime'>
                  </el-date-picker>


When defined:

choiceDate: '',
rangeoption: {
          onPick: ({
                     maxDate,
                     minDate
                   }) => {
            this.choiceDate = minDate.getTime()
            if (maxDate) {
              this.choiceDate = ''
            }
          },
          disabledDate: (time) => {
            const self = this
            if (self.choiceDate) {
              const selectDate = new Date(self.choiceDate)
              const nowYear = selectDate.getFullYear() // Current year
              //Start time of this year
              const yearStartDate = new Date(nowYear, 0, 1).getTime()
              // End time of this year
              const yearEndDate = new Date(nowYear, 12, 0).getTime()
              return (
                time.getTime() < yearStartDate || time.getTime() > yearEndDate
              )
            }
          }
        },

2. By default, the first day of the current month to today is displayed.

created() {
      let me=this;
      let mydate = new Date();
      me.searchParams.search.endtime = me.getTodaydate(mydate);
      let lw = new Date(mydate - 1000 * 60 * 60 * 24 * 30);
      me.searchParams.search.starttime = me.getTodaydate(lw);
      me.$set(me.searchParams, 'timerange', [me.searchParams.search.starttime, me.searchParams.search.endtime])
    },


getTodaydate (val) {
        let endY = val.getFullYear();
        let endM = val.getMonth() + 1;
        let endD = val.getDate();
        let enddate = endY + '-' + (endM < 10 ? '0' + endM : endM) + '-' + (endD < 10 ? '0' + endD : endD)
        return enddate
      },


<el-date-picker v-model="searchParams.timerange" :picker-options="rangeoption" type="daterange" placement="bottom-end"
                              style="width: 260px;"
                              clearable unlink-panels
                              range-separator="To" placeholder="Please select a date range"
                              size='small'
                              >
              </el-date-picker>

When defined:

rangeoption:{
          //You cannot select a date after today
          disabledDate (date) {
            return date & amp; & amp; date.valueOf() > Date.now() ;
          }
        },

3. From the first day of the year to the current date

 <el-date-picker v-model='timerange' :picker-options='rangeoption' type='daterange'
                                  placement='bottom-end'
                                  size='small'
                                  :clearable="false"
                                  style='width: 260px;' range-separator='to' placeholder='Please select a date range'
                                  start-placeholder='Start date'
                                  end-placeholder='End date'
                                  @change='changeBytime'>
                  </el-date-picker>
Definition: timerange:[],
rangeoption: {
          shortcuts: [
            {
              text: 'Nearly a week',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 6)
                picker.$emit('pick', [start, end])
              }
            },
            {
              text: 'Last two weeks',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 13)
                picker.$emit('pick', [start, end])
              }
            },
            {
              text: 'Nearly one month',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                picker.$emit('pick', [start, end])
              }
            }
          ],
          onPick: ({
                     maxDate,
                     minDate
                   }) => {
            this.choiceDate = minDate.getTime()
            if (maxDate) {
              this.choiceDate = ''
            }
          },
          disabledDate: (time) => {
            const self = this
            if (self.choiceDate) {
              const selectDate = new Date(self.choiceDate)
              const nowYear = selectDate.getFullYear() // Current year
              //Start time of this year
              const yearStartDate = new Date(nowYear, 0, 1).getTime()
              // End time of this year
              const yearEndDate = new Date(nowYear, 12, 0).getTime()
              return (
                time.getTime() < yearStartDate || time.getTime() > yearEndDate
              )
            }
          }
        },

changeBytime (val) {
        let me = this
        me.timerange = val
        if (me.timerange !== null) {
          me.searchParams.search.begindate = utils.formatDate(me.timerange[0], 'yyyy-MM-dd')
          me.searchParams.search.enddate = utils.formatDate(me.timerange[1], 'yyyy-MM-dd')
        } else {
          me.searchParams.search.begindate = ''
          me.searchParams.search.enddate = ''
        }
      },

created(){
      const today = new Date();
      const year = today.getFullYear();
      this.timerange = [
        `${year}-01-01`,
        `${year}-${today.getMonth() + 1}-${today.getDate()}`
      ];
    }

The knowledge points of the article match the official knowledge files, and you can further learn relevant knowledge. Vue entry skill tree Home page Overview 39638 people are learning the system