应用场景: 当前日期的查询所有数据皆为过往数据(历史数据), 时间在当下往前
默认: 当前月份展示在左边.在这里插入图片描述
实现: 点击选择时自动点击下个月按钮

 <!-- html -->
<span @click="changeInitCalendarRange">          
      <el-date-picker v-model="dateRange" type="datetimerange" range-separator="" start-placeholder="开始日期" end-placeholder="结束日期" @change="onsetmonitor" :default-time="['00:00:00', '23:59:59']" :clearable="false">               
      </el-date-picker>           
</span>
// js
// 定义countss
data() {       
 return { 
   dateRange:[],
   countss: 0,
 }
},
methods: {
  changeInitCalendarRange() {
    if (this.countss > 0) return;
    this.countss++;
    let element = document.querySelector("button.el-picker-panel__icon-btn.el-icon-arrow-left");
    if (element) element.click();  // 点击一次下个月
  },
  //如果选定值,重置countss
  onsetmonitor() {
    if (this.dateRange) return;
    this.countss = 0;   // 当日期数据为[]时重置
  }
}

在这里插入图片描述
另外, ElementPlus也适用, 但是要修改一下获取元素的类名: .arrow-left

let element = document.querySelector("button.el-picker-panel__icon-btn.arrow-left");

结束.

GitHub 加速计划 / eleme / element
10
1
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:4 个月前 )
c345bb45 8 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 8 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐