Writing in the front

When using the Calendar control, elementUi does not provide click events for last month, today and next month. However, I use elementUi in my business, because I need to give the month information in order to obtain the information of last month when scheduling. So write down your solutions today!

Add event

  • Implement the following code in the created hook function
This.$nextTick(() => {// click last month let prevBtn = document.querySelector('. El-calendar__button-group .el-button-group>button:nth-child(1)'); prevBtn.addEventListener('click', () => {console.info(this.valueData) this.dateformat (' YYYY-MM-DD ',this.valueData)}) // Click today let currBtn = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(2)'); currBtn.addEventListener('click', () => {console.info(this.valueData) this.dateformat (' YYYY-MM-DD ',this.valueData)}) // Click next month let nextBtn = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(3)'); nextBtn.addEventListener('click', () => { console.info(this.valueData) this.dateFormat('YYYY-mm-dd',this.valueData) }) })Copy the code

Time formatting code

/** * @param {Object} Time format required by FMT For example: 'YYYY-MM-DD' * @param {Object} date Greenwich Mean time */ dateFormat(FMT, date) {let ret; Const opt = {" Y + ": the date getFullYear (), toString ()," m + ": / / year (date, getMonth () + 1). The toString (), / /" d + ": Date. GetDate (). The toString (), / / day "H +" : the date. The getHours (), toString (), / / "M +" : the date. The getMinutes (). The toString (), / / min "S +" : Date. GetSeconds (). The toString () / / SEC}; for (let k in opt) { ret = new RegExp("(" + k + ")").exec(fmt); if (ret) { fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0"))) }; }; return fmt; },Copy the code
Print the result

Pay attention to the point

ValueData is the parameter defined in our data, that is, we need to define valueData: new Date() in the return, and then bind it to our Calendar control to automatically calculate each month, the code is as follows:

<el-calendar v-model='valueData' v-loading="loading" style="margin-top: 10px"> <template slot="dateCell" slot-scope="{date, data}"> <div class="currCalendarSty" @dblclick="calendarOnClick(data,date)"> <p :class="data.isSelected ? 'is-selected' : ''"> {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔ ️' : ''}} </p> <el-row :gutter="20"> <el-col :span="12" v-for="item in schdules[data.day]" :key="item.id" class="text item"> <div style="display: flex; flex-direction: column; justify-items: center; align-items: flex-start"> <div style="font-weight: bold">{{item.shifts ! ==null ? Item.shifts. Name: 'Shift not set '}}</div> <div>{{item.useralias}} <el-tag V-if ="item.user_status && item.user_status! ==' '" size="mini" type="success">{{item.user_status}}</el-tag> </div> </div> </el-col> </el-row> </div> </template> </el-calendar>Copy the code

The end of the

{type, isSelected, day}, {type, isSelected, day}, {type, isSelected, day}, {type, isSelected, day} The value can be prev-month, current-month, or next-month. IsSelected indicates whether the date isSelected; Day is the formatted date in the format of YYYY-MM-DD component address