当前位置: 首页 > news >正文

Element UI DatePicker选择日期范围区间默认显示前一个月和本月

要求:点击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;}},//如果选定值,重置countssonsetmonitor(){if(this.ruleForm.time){return};this.countss = 0},}
}

 

 

http://www.lryc.cn/news/403448.html

相关文章:

  • C++:聚合类、嵌套类、局部类、union类详细介绍与分析
  • MKS流量计软件MFC通讯驱动使用于C和P系列MFC控制USB接口W10系统
  • C++:左值/右值引用、移动语义/std::move、万能引用/完美转发std::forward 详解
  • 蜂窝物联云平台:一站式服务,智能生活从此开始!
  • 【中项】系统集成项目管理工程师-第3章 信息技术服务-3.3服务生命周期
  • 【iOS】——消息传递底层实现
  • PostgreSQL数据库从入门到精通系列之十:表空间、索引表空间、创建表空间、创建索引空间、创建分区表、创建分区表的分区、创建指定表空间、索引表空间的分区表
  • 恶补,先验分布,后验分布 ,似然估计
  • JS之数组中的reduce方法
  • 在win10上通过WSL和docker安装Ubuntu子系统,并配置Ubuntu可成功使用宿主机GPU
  • python需要掌握那些语法
  • CentOS Mysql8 数据库安装
  • 新手教程---python-函数(新添加)
  • Windows tasklist命令详解,Windows查看进程
  • 数据结构——线性表(循环链表)
  • 深度剖析机构号矩阵系统:如何根据业务需求做出明智选择
  • go语言的基础语法
  • Modbus转Ethernet/IP网关模块与汇川PLC通讯案例
  • 【玩转python】入门篇day11-位运算
  • 【Gitlab】记一次升级 Gitlab 后 API 失效的问题
  • 2024.7.19 作业
  • python如何创建SQLite 数据库连接,如何将数据库存储在内存中?
  • 机器学习-20-基于交互式web应用框架streamlit的基础使用教程
  • 基于luckysheet实现在线电子表格和Excel在线预览
  • 【学习笔记】无人机系统(UAS)的连接、识别和跟踪(一)-3GPP TS 23.256 技术规范概述
  • sqlalchemy_dm
  • 基于springboot+vue+uniapp的驾校预约平台小程序
  • echarts实现3d柱状效果
  • Flask校验
  • web前端 Vue 框架面试120题(一)