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