要求:点击el-date-picker
选择时间范围时,默认展开当月和上个月。
但是Element UI的组件默认展开的是本月和下一个月,如下图所示:
改为
<span @click="changeInitCalendarRange">
<el-date-picker v-model="ruleForm.time" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss"
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" @change="onsetmonitor" @blur="blur"
class="form-width">
</el-date-picker>
</span>
<script>
export default {
data() {
return {
pickerOptions: {
disabledDate(time) {
return time.getTime() > Date.now() - 8.64e7 || time.getTime() < Date.now() - 8.64e7 * 90;
},
shortcuts: [
{
text: '最近一周',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', [start, end]);
},
},
{
text: '最近一个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]);
},
},
{
text: '最近三个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit('pick', [start, end]);
},
},
],
},
};
},
methods: {
/**时间范围选择器,组件默认展示上月和本月 点击判断**/
changeInitCalendarRange() {
if(this.countss > 0){
return
}else{
this.countss++
let element = document.querySelector("button.el-picker-panel__icon-btn.el-icon-arrow-left");
if (element){
element.click()
};
};
},
//多次点击清空按钮
blur(){
if(this.ruleForm.time == null){
this.countss = 0;
}
},
//如果选定值,重置countss
onsetmonitor(){
if(this.ruleForm.time){
return
};
this.countss = 0
},
}
}