element 让日期选择器一直显示选择面板

叁歲伎倆 2023-01-23 13:55 16阅读 0赞

### element 日期选择一直显示 ###

*  问题描述
 *  解决方案

# 问题描述 #

想要达到如下效果，使得日期选择器的日期选择面板一直展示着，无论是点击其他地方还是点击了日期，都显示着。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70]

# 解决方案 #

通过翻阅官方文档 [Element DatePicker ][Element DatePicker]，并没有直接的示例，但是可以通过日期组件的 Events 和 Methods 实现该效果。

<div class="item-box">
    	<el-date-picker ref="datePick" @change="chooseDate" @blur="chooseDate" v-model="dateValue" type="date" placeholder="请选择日期">
    	</el-date-picker>
    </div>

export default { 
    	name: "Output",
    	data() { 
    		return { 
    			dateValue: "",
    		}
    	},
    	mounted() { 
    		this.$refs.datePick.focus(); // 让日历组件默认触发焦点事件
    	},
    	methods: { 
    		chooseDate() { 
    			this.$refs.datePick.focus(); // 选择日期后依旧触发焦点
    		}
    	},
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70]: /images/20221004/45778f3dc01044e19c5147fb47227280.png
[Element DatePicker]: https://element.eleme.cn/#/zh-CN/component/date-picker

发表评论取消回复

表情：

评论列表（有 0 条评论，16人围观）

还没有评论，来说两句吧...

相关阅读

相关 Element 组件DatePicker日期选择器【格式化日期】

![3915db8951404658baa0616162d04b00.png][] ![2a2fc025b9124d8e892f8ea30f5811dd.png][] 选择

「爱情、让人受尽委屈。」/ 2023年10月02日 21:45/ 0 赞/ 30 阅读

相关关于element-ui日期选择器disabledDate使用心得

> 实现目的: > > 　　使用type="data"类型实现具备开始日期与结束日期组件(ps:element有自带的type="daterange"类型的组件可以实现此功能

野性酷女/ 2023年06月21日 11:24/ 0 赞/ 7 阅读

相关 element 让日期选择器一直显示选择面板

element 日期选择一直显示问题描述解决方案问题描述想要达到如下效果，使得日期选择器的日期选择面板一直展示着，无论是点击其他地方还是点击了

叁歲伎倆/ 2023年01月23日 13:55/ 0 赞/ 17 阅读

相关【Vue.js】Vue.js组件库Element中的时间选择器、日期选择器、日期时间选择器和颜色选择器

1、TimePicker 时间选择器用于选择或输入日期。固定时间点提供几个固定的时间点供用户选择。 ![20200831145158463.png_pi

比眉伴天荒/ 2022年12月02日 13:53/ 0 赞/ 1475 阅读

相关 Element-UI 两个日期选择器联动选择日期

Element-UI 两个日期选择器联动选择日期 <template> <div> <div class="timesel">

ゞ浴缸里的玫瑰/ 2022年09月16日 14:17/ 0 赞/ 562 阅读

相关 Element el-date 日期时间选择器详解

[点此查看全部文字教程、视频教程、源代码][Link 1] 本文目录 1. 前言 2. 基本用法 3. 设置默认时间 4. 选择范围 5.

我就是我/ 2022年09月16日 03:58/ 0 赞/ 395 阅读

相关 Element el-date-picker 日期选择器详解

[点此查看全部文字教程、视频教程、源代码][Link 1] 本文目录 1. 前言 2. 基本用法 3. 日期格式化 4. 选择其他日期单位

女爷i/ 2022年09月15日 15:48/ 0 赞/ 368 阅读

相关 element DateTimePicker 日期时间选择器选择范围限制

内容需求：两个DateTimePicker选择日期范围需要做日期范围限制；开始时间必须小于结束时间；结束时间必须大于开始时间；开始时间和结束时间可以选择同一

今天药忘吃喽~/ 2022年08月29日 13:52/ 0 赞/ 1104 阅读

相关 element ui日期选择器datepicker格式转换

传递参数时需要转换格式为 “yyyy-MM-dd” 而用element ui日期选择器，默认的格式是 Thu Dec 17 2020 00:00:00 GMT+0800

末蓝、/ 2021年07月25日 18:28/ 1 赞/ 723 阅读

相关解决element-ui日期选择器显示不全问题

如图所示，在使用日期选择器时，至字显示不全 ![’至‘字显示不全][20201218153151667.png] 此时在style中写入以下代码 /deep/

约定不等于承诺〃/ 2021年07月25日 13:00/ 0 赞/ 1934 阅读