el-date-picker实现通过其他方式触发日期选择器

news2024/10/7 8:32:06

el-date-picker 目前只能通过点击input输入框触发日期选择器,项目中需要通过其他方式触发日期选择器同时把input输入框去掉,如点击按钮
在这里插入图片描述
该模块由于后端接口数据传输限制 在前面文章里做了些许改动。

需求左右切换 可以快速找到年份,于是添加了element选择年份的日期组件。
图中隐藏了el-data-picker日期组件,手动添加样式展示时间栏选择的数据进行 +0 回显。
点击时间时,让日期组件显示出来时存在一个问题 就是每次点击 需要点击两下才能完成年份的选择。
第一次是让组件显示
第二次点击是触发日期框选择器

于是查询了相关文档,可以通过focus来触发日期选择框。如下:
在这里插入图片描述

document.querySelector('.time-date-picker').querySelector('input').focus() 

给el-date-picker 一个类名,找到类名下的input手动触发focus。

        <div class="date-result">
        //不让该组件显示 只用到日期框
          <el-date-picker
            class="time-date-picker"
            style="
              position: recative;
              z-index: -100;
              transform: scale(0.2) translate(-300px, 100px);
            "
            v-model="checkYear"
            :editable="false"
            type="year"
            placeholder="选择年份"
            @change="changeYear"
          >
          </el-date-picker>
          <div class="hiddenPicker">
            <span @click="checkPicker" style="cursor: pointer">
              <i class="el-icon-date"></i>{{ dataYear }}-{{ dateMonth }}</span
            >
            <span>消费成本:<i>628.736.91元</i></span>
            <span>应收账款:<i>976.381.30元</i></span>
          </div>
        </div>

<script>
export default{
	data(){
		return{
			checkYear:''
		}
	}
	methods:{
	 changeYear(checkYear) {
      if (checkYear !== null)
      this.dataYear = checkYear.toString().substr(11, 4);
      this.clcikMonth(this.dateMonth);
    },
	checkPicker() {
      	//触发日期框展开
      	document
        	.querySelector(".time-date-picker")
        	.querySelector("input")
        	.focus();
    	},
	}
}
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/169490.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

大数据技术架构(组件)——Hive:环境准备3

1.0.2、服务启动在搭建Hadoop的环节中&#xff0c;已经将Hadoop服务启动了&#xff0c;这里将Hive Metastore服务启动hive --service metastore1.0.2.1、服务端启动Debug模式为了方便学习&#xff0c;大家可以在IDEA中打开Terminal&#xff0c;开启debug模式和metastore服务启动…

C++设计模式实践——线上购物系统

一、系统的主要目标与功能 在本次设计中&#xff0c;考虑到目前疫情反复不断&#xff0c;为了方便群众&#xff0c;超市都推出在线购物并有配送员送货&#xff0c;于是我设计了一个超市在线网上购物送货的系统&#xff0c;这个系统的主要目标是帮助人们在家里购买自己需要的套…

Rust 学习笔记

参考自Rust 程序设计语言 简体中文版 1. Hello world 2. Cargo&#xff08;Rust 的构建系统和包管理器&#xff09; 使用 Cargo 创建项目 Cargo 配置文件 Cargo 目录结构 构建并运行 Cargo 项目 发布&#xff08;release&#xff09;构建 Cargo 常用命令 cargo build&#xf…

【青训营】Go的测试

Go的测试 测试主要包括&#xff1a;回归测试、集成测试、单元测试 一、单元测试 其中测试单元可以是函数&#xff0c;也可以是模块 规则&#xff1a; 1.所有测试文件都以_test.go结尾 2.测试函数命名规范:func TestXxx(*Testing.T) 3.初始化逻辑需要放置在TestMain中 以下是…

django框架【待续】

目录简介MVC与MTV模型MVCMTV创建项目目录生命周期静态文件配置&#xff08;无用&#xff09;启动django[启动](https://www.cnblogs.com/xiaoyuanqujing/articles/11902303.html)路由分组无名分组有名分组路由分发反向解析反向解析结合分组名称空间re_path与path自定义转换器视…

为什么普通人赚钱这么难?普通人的赚钱之路在哪里

前几天听一个老家的朋友说辛辛苦苦一整年&#xff0c;发现并没有赚到什么钱。付出与收入不成正比。首先要知道勤奋、努力并不一定就能够赚到钱像送外卖的&#xff0c;工地上班的&#xff0c;厂里上班的哪个不勤奋但他们即使非常努力工作一个月&#xff0c;扣除基本开支&#xf…

这是一篇知识帖:终于能明白云原生技术的概念和可落地的应用分享

随着云计算的发展和普及&#xff0c;云原生概念的热度也越来越高&#xff0c;到底什么是云原生&#xff1f;和我们日常工作有什么关系&#xff1f;本文是向大家介绍云原生技术的概念和要点&#xff0c;帮助大家快速了解和学习云原生&#xff0c;&#xff0c;便于大家了解工作的…

【PHP了解】PHP脚本语言基础

PHP PHP 文件的默认文件扩展名是 “.php”PHP 文件通常包含 HTML 标签和一些 PHP 脚本代码 例&#xff1a; <!DOCTYPE html> <html> <body><?php xxxxxxxxxxxxxxxxx; ?></body> </html>语法 代码框架 <?php 开始&#xff0c;以 ?…

DW动手学数据分析Task1:数据加载及探索性数据分析

目录1 数据载入1.1 载入数据1.2 read_csv和read_table的区别1.3 逐块读取1.4 修改表头和索引2 数据初步观察2.1 查看数据基本信息2.2 保存数据3 pandas数据结构和列操作3.1 Series 和DataFrame3.2 查看 DataFrame数据每列的名称和值3.3 DataFrame 的列删除和隐藏4 数据筛选4.1 …

如何合并pdf?来看这几个方法!

我们经常在整理文件的时候经常会选择将一些常用文件的格式改为pdf&#xff0c;因为这种文件格式就算发送给了别人&#xff0c;别人也不能随意的修改文件内容&#xff0c;这就保证了我们的文件内容的隐私安全。不过&#xff0c;对于处理pdf文件&#xff0c;我们还是会面临一些不…

c++ dynamic_cast,static_cast,const_cast,reinterpret_cast四种cast用法整理

在C中主要分为四种cast&#xff0c;分别是&#xff1a;static_cast、dynamic_cast、const_cast和reinterpret_cast dynamic_cast动态类型转换 首先&#xff0c;我们明确基类和派生类之间的两个转换术语 向上转换(upcast)&#xff1a;派生类向基类转换 向下站还(downcast)&…

证券服务应用评测系列:海通e海通财发布9.0版本,探索证券APP持续提升用户体验

易观分析&#xff1a;APP作为券商机构线上服务的入口&#xff0c;其活跃用户规模和运营水平在一定程度上能够体现机构战略定位、品牌运营、科技创新、用户竞争等综合实力。易观分析认为&#xff0c;如何围绕用户进行创新&#xff0c;利用技术将壁垒升高&#xff0c;打造具有品牌…

PuTTY installation directory must be on a local hard drive

putty安装问题 问题描述&#xff1a;安装时候报错&#xff0c;installation directory must be on a local hard drive 解决方案&#xff0c;无法解决。 很多人使用了这个方法解决了。但是我解决不了。 1、如果是exe类型的&#xff0c;直接右击以管理员身份运行。 2、如果是…

常用的文件类型大全(建议收藏)

文件格式格式图标格式概况mpg文件mpg是一种常见的视频格式,mpeg标准主要有以下五个,MPEG-1、MPEG-2、MPEG-4、MPEG-7及MPEG-21等。mpg有可能是基于MPEG-1(VCD)或MPEG-2torrent文件torrent文件(扩展名为.torrent)包含了一些BT下载所必须的信息,根据BitTorrent协议,文件发布者…

opencv文字旋转 putText旋转90°

文章目录● opencv文字旋转 putText旋转901. cv::getTextSize获取文字的尺寸textSize2. 设置文字图像textImg尺寸格式3. 将文字绘制在文字图像textImg上4. 对文字图像textImg进行旋转5. 在原图img上设置用来放置文字图像textImg的roi区域5.1 矩形区域roi5.2 行列范围roi6. 将文…

Swin-Unet: Unet-like Pure Transformer for Medical Image Segmentation论文解读

Swin-Unet: Unet-like Pure Transformer for Medical Image Segmentation 论文&#xff1a;[2105.05537] Swin-Unet: Unet-like Pure Transformer for Medical Image Segmentation (arxiv.org) 代码&#xff1a;HuCaoFighting/Swin-Unet: The codes for the work “Swin-Unet:…

LiveNVR监控流媒体Onvif/RTSP功能功能-支持GB35114接入国标流媒体平台接入说明

LiveNVR监控流媒体Onvif/RTSP功能功能-支持GB35114接入国标流媒体平台接入说明1、GB35114注册2、LiveNVR通过GB35114接入LiveGBS2.1、开启LiveGBS 35114功能2.2、 获取设备端证书给平台2.3、LiveGBS白名单中添加需要接入的国密设备2.4、导出LiveGBS平台端证书给设备&#xff08…

管理学实验的设计与实践结课作业

一、不同组织结构类型对组织的沟通效率会带来影响&#xff0c;这也是在组织结构设计过 程需要考虑的重要内容&#xff0c;但对于两者的关系无法准确界定。如在直线职能制的组织结构中&#xff0c;管理幅度和深度是影响是影响沟通效率的主要因素。请设计实验来验证分析直线职能制…

手动部署SQL审计平台Archery(连接mysql8.x)

安装Python和virtualenv从1.9.0版本开始&#xff0c;将不再支持python3.7及以下版本&#xff0c;手动安装也将使用3.9版本作为样例&#xff0c;移除yum安装方式# 安装依赖 yum install libffi-devel wget gcc make zlib-devel openssl openssl-devel ncurses-devel openldap-de…

分享81个PHP源码,总有一款适合您

PHP源码 分享81个PHP源码&#xff0c;总有一款适合您 下面是文件的名字&#xff0c;我放了一些图片&#xff0c;文章里不是所有的图主要是放不下...&#xff0c; 81个PHP源码下载链接&#xff1a;https://pan.baidu.com/s/18jo0nrQ6tCf-e1PAylItmQ?pwd3rxz 提取码&#xff…