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;
            }
        },
        //如果选定值,重置countss
        onsetmonitor(){
          if(this.ruleForm.time){
            return
          };
          this.countss = 0
        },
    }
}
相关推荐
ShineWinsu20 分钟前
对于JavaScript:操作元素的解析
开发语言·前端·javascript·面试·web·dom·元素
福兮说1 小时前
JSON 格式正确,数据就可靠吗?我用一份自编配置检查类型与空值
java·前端·json
程序员老赵3 小时前
Docker 部署青龙面板:轻松搭建定时任务管理平台
前端·docker·开源
Swot3 小时前
Asciidoctor 公式数字下标错位问题:原因分析与解决方案
前端
Swot3 小时前
leo-editor 中将 Markdown 内容转成 asciidoc 格式
前端
狒狒AI3 小时前
Remotion / GSAP+Three / HyperFrames / Skia 四栈实测:代码渲染知识视频的选栈方法(附开源技能)
前端·人工智能·aigc
修炼的dance3 小时前
浏览器里导出H.265,8.5秒和55.5秒差在硬件
前端
补码缩写3 小时前
WebCodecs选编码器,探测之后还要验解码和播放
前端
大文说跨境3 小时前
亚马逊多账号管理浏览器怎么选?云登/紫鸟/AdsPower 对比
java·前端·自动化
hunter_0763 小时前
iOS 首页复杂嵌套滚动技术方案:头部固定 + 网格滚动 + Tab 吸顶 + 每 Tab 独立下拉刷新
前端