01-ElementUI_日期选择器默认展示当前月份在右边
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
应用场景: 当前日期的查询所有数据皆为过往数据(历史数据), 时间在当下往前
默认: 当前月份展示在左边.
实现: 点击选择时自动点击下个月按钮
<!-- 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 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)