打造灵活DateTimePicker日期时间选择器组件:轻松实现时间的独立清除功能

element ui中日期和时间选择器(DateTimePicker)是一个常见且重要的组件。它允许用户轻松地选择日期和时间,极大地提升了用户体验。然而,在某些场景下,用户可能需要更细粒度的控制,例如单独清除已选择的时间而保留日期。效果如下图,本文将带领你一步步封装一个DateTimePicker组件,实现时间的独立清除功能。

 实现步骤

1、在components中新建组件dataTimePicker

<template><el-date-picker:popper-class="uniqueId"style="margin-left: 5px"type="datetime"v-model="dataTimeValue":placeholder="placeholder"@change="changeDateTime"@focus="onFocus"></el-date-picker>
</template>

1、1给每个组件自定义一个唯一的下拉框class名 

 data() {return {dataTimeValue: "", // 初始化值uniqueId: `date-picker-${Math.random().toString(36).substring(2, 15)}`, // 生成一个唯一的IDisAddCloseIcon: false,};},

1.2 该组件接收两个props

  props: {timeValue: {type: Date, // 初始展示时间required: false,},placeholder: {type: String,require: false,default: "起始时间",},},

1.3 在 onFocus事件中,添加清除图标,因为只有当onFocus触发时,下拉框才显示,才能获取到下拉框dom

onFocus() {if (this.isAddCloseIcon) return; // 避免重复添加this.$nextTick(() => {this.timeDiv = document.querySelectorAll(`.${this.uniqueId} .el-date-picker__editor-wrap .el-input`,this.$el)[1];this.span = document.createElement("span");this.span.innerHTML = `<i class="el-icon-circle-close"></i>`;this.span.style.position = "absolute";this.span.style.right = "10px";this.span.style.cursor = "pointer";this.span.style.display = "none"; // 初始时隐藏spanthis.timeDiv.appendChild(this.span);// 鼠标移入事件this.timeDiv.addEventListener("mouseenter",this.handleMouseenter);// 鼠标移出事件this.timeDiv.addEventListener("mouseleave", this.handleMouseLeave);// 点击事件,清除时间置为00:00:00this.span.addEventListener("click", this.clearDateTimeValue);this.isAddCloseIcon = true;});},

1.4  清除时间事件以及鼠标移入显示图标移除隐藏图标:

 clearDateTimeValue() {this.dataTimeValue = this.$moment(this.dataTimeValue).startOf("day").toISOString();},handleMouseLeave() {this.span.style.display = "none";},handleMouseenter() {this.span.style.display = "inline";}

1.5 时间变化时通知父组件:

changeDateTime(value) {this.dataTimeValue = value;this.$emit("change", value);},

1.6 组件销毁时,移除监听事件:

 beforeDestroy() {// 组件销毁前清理事件监听器this.span.removeEventListener('click',this.clearDateTimeValue)this.timeDiv.removeEventListener('mouseenter',this.handleMouseenter)this.timeDiv.removeEventListener('mouseleave',this.handleMouseLeave)this.span = nullthis.timeDiv = null},

完整代码:

dataTimePicker.vue:

<template><el-date-picker:popper-class="uniqueId"style="margin-left: 5px"type="datetime"v-model="dataTimeValue":placeholder="placeholder"@change="changeDateTime"@focus="onFocus"></el-date-picker>
</template><script>
export default {props: {timeValue: {type: Date,required: false,},placeholder: {type: String,require: false,default: "起始时间",},},data() {return {dataTimeValue: "", // 初始化值uniqueId: `date-picker-${Math.random().toString(36).substring(2, 15)}`, // 生成一个唯一的IDisAddCloseIcon: false,};},mounted() {this.dataTimeValue = this.timeValue;},methods: {changeDateTime(value) {this.dataTimeValue = value;this.$emit("change", value);},onFocus() {if (this.isAddCloseIcon) return; // 避免重复添加this.$nextTick(() => {this.timeDiv = document.querySelectorAll(`.${this.uniqueId} .el-date-picker__editor-wrap .el-input`,this.$el)[1];this.span = document.createElement("span");this.span.innerHTML = `<i class="el-icon-circle-close"></i>`;this.span.style.position = "absolute";this.span.style.right = "10px";this.span.style.cursor = "pointer";this.span.style.display = "none"; // 初始时隐藏spanthis.timeDiv.appendChild(this.span);// 鼠标移入事件this.timeDiv.addEventListener("mouseenter",this.handleMouseenter);// 鼠标移出事件this.timeDiv.addEventListener("mouseleave", this.handleMouseLeave);this.span.addEventListener("click", this.clearDateTimeValue);this.isAddCloseIcon = true;});},clearDateTimeValue() {this.dataTimeValue = this.$moment(this.dataTimeValue).startOf("day").toISOString();},handleMouseLeave() {this.span.style.display = "none";},handleMouseenter() {this.span.style.display = "inline";}},beforeDestroy() {// 组件销毁前清理事件监听器this.span.removeEventListener('click',this.clearDateTimeValue)this.timeDiv.removeEventListener('mouseenter',this.handleMouseenter)this.timeDiv.removeEventListener('mouseleave',this.handleMouseLeave)this.span = nullthis.timeDiv = null},
};
</script>

2、在父组件引入:

<template>
<dateTimePicker :timeValue="startTime"  @change="changeDateTime"></dateTimePicker>
</template>
<script type="text/ecmascript-6">
import dateTimePicker from '@/components/dataTimePicker.vue'
export default {
...,methods: {changeDateTime(value) {console.log('变化',value)
}
}
</script>

3、总结

通过以上方法,我们可以实现在不改变日期的情况下单独清除时间功能,实际上就是在element ui原本的el-date-picker组件上进行改装,增加一个清除按钮并绑定清除事件来实现。实际应用中,你可以根据具体需求进一步扩展和定制这个组件,以满足不同场景下的使用。希望这篇文章能对你有所帮助!

 

 

 

 

 

 

 

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【资源一号02C卫星】

资源一号02C卫星 资源一号02C卫星是中国航天科技集团公司所属中国空间技术研究院负责研制生产的一颗重要遥感卫星。以下是关于该卫星的详细介绍&#xff1a; 一、基本信息 发射时间&#xff1a;2011年12月22日11时26分发射地点&#xff1a;中国太原卫星发射中心运载火箭&am…

基于区块链的相亲交易系统源码解析

随着区块链技术的成熟与发展&#xff0c;其去中心化、不可篡改的特性逐渐被应用于各行各业。特别是在婚恋市场中&#xff0c;区块链技术的应用为相亲平台带来了新的可能性 。本文将探讨如何利用区块链技术构建一个透明、高效的相亲交易系统&#xff0c;并提供部分源码示例。 区…

提前解锁 Vue 3.5 的新特性

Vue 3.5 是 Vue.js 新发布的版本&#xff0c;虽然没有引入重大变更&#xff0c;但带来了许多实用的增强功能、内部优化和性能改进。 1. 响应式系统优化 Vue 3.5 进一步优化了响应式系统的性能&#xff0c;并且减少内存占用。尤其在处理大型或深度嵌套的响应式数组时&#xff…

Contact Form 7最新5.9.8版错误修复方案

最近有多位用户反应Contact Form 7最新5.9.8版的管理页面有错误如下图所示 具体错误文件的路径为wp-content\plugins\contact-form-7\admin\includes\welcome-panel.php on line 153 找到welcome-panel.php这个文件编辑它&#xff0c;将如下图选中的部分删除 删除以后&#xf…

显示和隐藏图片【JavaScript】

使用 JavaScript 来实现显示和隐藏图片。下面是一个简单的示例&#xff0c;展示如何通过按钮点击来切换图片的可见性。 实现效果: 代码&#xff1a; <!DOCTYPE html> <html lang"zh"><head><meta charset"UTF-8"><meta name&…

python爬虫案例——抓取链家租房信息

文章目录 1、任务目标2、分析网页3、编写代码1、任务目标 目标站点:链家租房版块(https://bj.lianjia.com/zufang/) 要求:抓取该链接下前5页所有的租房信息,包括:标题、详情信息、详情链接、价格 如: 2、分析网页 用浏览器打开链接,按F12或右键检查,进入开发者模式;因…

计算机毕业设计 美发管理系统的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍&#xff1a;✌从事软件开发10年之余&#xff0c;专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精…

OpenAI converting API code from GPT-3 to chatGPT-3.5

题意&#xff1a;将OpenAI API代码从GPT-3转换为ChatGPT-3.5 问题背景&#xff1a; Below is my working code for the GPT-3 API. I am having trouble converting it to work with chatGPT-3.5. 以下是我用于GPT-3 API的工作代码。我在将其转换为适用于ChatGPT-3.5时遇到了…

前端开发之装饰器模式

介绍 装饰器模式 是在不修改对象内部结构的情况下&#xff0c;动态地给对象添加功能的一种设计模式。在软件开发中&#xff0c;有时候我们需要为已有对象添加一些额外的行为&#xff0c;但不希望修改该对象的代码&#xff0c;装饰器模式可以很好的满足这一需求。 在TypeScrip…

echarts map地图动态下钻,自定义标注,自定义tooltip弹窗【完整demo版本】

在数据可视化中&#xff0c;地图是很重要的一个环节&#xff0c;很多时候需要展现的不仅是国家地图&#xff0c;还需要能从国家进入到省市。这个逐级进入的过程就是我们今天说的地图下钻。 地图下钻看起来很屌、很高大上&#xff0c;但是仔细琢磨一下&#xff0c;技术实现上真的…

Cpp类和对象(下)(6)

文章目录 前言一、初始化列表概念使用注意实际运用explicit关键字初始化列表的总结 二、static成员static成员的概念static成员的特性static的一个实用场景 三、友元友元函数友元类 四、内部类概念特性 五、匿名对象六、再次理解封装和面向对象总结 前言 Hello&#xff0c;本篇…

『玉竹』基于Laravel 开发的博客、微博客系统和Android App

基于 Laravel 和 Filament 开发, 使用 Filament 开发管理后台&#xff0c;前端比较简洁。 博客大家都清楚是什么东西&#xff0c;微博客类似于微博之类的吧&#xff0c;有时候想要写的东西可能只有几句话&#xff0c;想要起个标题都不好起。 为了是微博客功能更好用&#xff0c…

【小程序】微信小程序课程 -3 快速上手之常用方法

目录 1、 对话框 1.1 模态对话框 1.2 消息对话框 2、 存储 2.1 同步 2.1.1 同步保存数据 2.1.2 同步获取数据 2.1.3 同步删除数据 2.1.4 同步清空数据 2.2 异步 2.2.1 异步保存数据 2.2.2 异步获取数据 2.2.3 异步删除数据 2.2.4 异步清空数据 3、 上拉加载更多…

Java类加载揭秘:从加载过程到双亲委派机制

类的加载 目标 能够理解字节码加载过程 【了解】 路径 类的加载过程类的加载时机 类的加载 当程序在运行后&#xff0c;第一次使用某个类的时候&#xff0c;会将此类的class文件读取到内存&#xff0c;并将此类的所有信息存储到一个Class对象中 说明&#xff1a;Class对象…

金仓数据库 KingbaseES参考手册 (8. 函数(九))

8.299. SCALE 用法&#xff1a; scale(numeric)功能&#xff1a; SCALE返回参数的精度&#xff08;小数点后的位数&#xff09;。 例子&#xff1a; SELECT scale(8.41);8.300. SCORE 用法&#xff1a; SCORE(lable number)输入参数&#xff1a; lable&#xff1a;表示第几个co…

js发送邮件至指定邮箱功能实现方式和技巧?

js发送邮件至指定邮箱的教程&#xff1f;怎么使用Node.js发信&#xff1f; 无论是用户反馈、订单确认还是密码重置&#xff0c;js发送邮件至指定邮箱的需求无处不在。AokSend将深入探讨js发送邮件至指定邮箱的实现方式和技巧&#xff0c;帮助开发者更好地理解和应用这一功能。…

windows桌面管理软件推荐:一键整理桌面!美化电脑桌面小助手!

windows桌面管理软件推荐来咯&#xff01;在繁忙的工作和生活中&#xff0c;一个整洁、有序的电脑桌面不仅能提升工作效率&#xff0c;还能带来愉悦的视觉体验。然而&#xff0c;随着文件的增多&#xff0c;桌面往往变得杂乱无章。幸运的是&#xff0c;市面上有许多优秀的Windo…

推荐一款开源的Redis桌面客户端

TinyRDM 是一个现代化的、轻量级的跨平台 Redis 桌面客户端&#xff0c;能在 Mac、Windows 和 Linux 系统上使用。它有着现代化的设计风格&#xff0c;界面既简洁又清晰&#xff0c;操作起来方便又高效。不管是刚开始接触的新手&#xff0c;还是经验丰富的开发者&#xff0c;都…

C++标准库类——string类

引言 在c中&#xff0c;string类的引用极大地简化了字符串的操作和管理&#xff0c;相比 C 风格字符串&#xff08;char*或cahr[]&#xff09;&#xff0c;std::string 提供了更高效和更安全的字符串操作。接下来让我们一起来深入学习string类吧&#xff01; 1.string 的构造…

Spring Cache的使用

一、简介 1. Spring Cache是Spring提供的一个缓存框架&#xff0c;在Spring3.1版本开始支持将缓存添加到现有的spring应用程序中&#xff0c;在4.1开始&#xff0c;缓存已支持JSR-107注释和更多自定义的选项。 1. Spring Cache利用了**AOP**&#xff0c;实现了基于注解的缓存…