element-plus中的日期时间选择器el-date-picker;日期选择面板中选定起始与结束的日期只能改具体的时刻,日期默认是一个月没法动态修改问题

目前遇到一个问题,在使用element-plus中的日期时间选择器el-date-picker,type为datetimerange时,展示的日期选择面板有两个输入框,开始时间和结束时间,element-plus只提供了default-time

使用datetimerange进行范围选择时,在日期选择面板中选定起始与结束的日期,默认会使用该日期的00:00:00作为起始与结束的时刻;通过选项default-time可以控制选中起始与结束日期时所使用的具体时刻。 我们可以使用 default-time 属性来控制它。 default-time接受一个数组,其中第一项控制起始日期的具体时刻,第二项控制结束日期的具体时刻。

对于年月日的修改的话,默认是一个月的设定,这与我的需求不一致,我需要是默认一周的范围才可。找了一大圈,官网和githup都看了,没有想对应的修改;也没有发现可以替换该组件的类似插件;所以我决定直接修改它的源码。可以看到在/element-plus-dev/packages/components/date-picker/src/date-picker-com/panel-date-range.vue里,对日期选择面板的input的change事件是:
在这里插入图片描述
其实只要讲对应的(1, ‘month’)改成一周(7, ‘day’)即可(这是dayjs的语法,不明白的可以看 dayjs中文网)
找到了文件后,怎么把它融合到自己的项目就是个问题了;

  1. 先将代码从git上down下来,找到date-picker文件夹;可以将整个都copy下来放到你本地的components文件夹内;
  2. 这时的文件都是红色的,因为有很多引用并没有,需要一个一个进行修改,以下我具体写一下修改的部分:
import { useNamespace } from '@element-plus/hooks'
修改成 import { useNamespace } from 'element-plus'import {CommonPicker,DEFAULT_FORMATS_DATE,DEFAULT_FORMATS_DATEPICKER,
} from '@element-plus/components/time-picker'
修改成
import {CommonPicker,DEFAULT_FORMATS_DATE,DEFAULT_FORMATS_DATEPICKER,
} from 'element-plus'
// 有关组件的基本都直接引用“element-plus”即可import { buildProps, definePropType, isArray } from '@element-plus/utils'
从utils引用的比较麻烦,直接install的@element-plus/utils跟原来导出的很多都不一样,这里有两个方案:
1、考虑将utils所有的copy下来,然后再引用;
2、可以将buildProps、definePropType相关的内容都复制出来,放在你本地的文件里再引用;这可以减少很多的代码,但也会有很多别的引用得慢慢修改;(我用的是这方法)
isArray这种比较简单,直接用Array.isArray就行修改即可
  1. 到这把需要修改的红色都修改完了,将使用element-plus组件的地方直接本地引用components的DataPicker,然后运行起来发现日期选择面板缺了两块,头部的input和footer的按钮不见了,看了下也引用了呀,后面发现有个小问题:
import ElButton from '@element-plus/components/button'
import ElInput from '@element-plus/components/input'
import ElIcon from '@element-plus/components/icon'
// 对于组件的引用,他们的格式是这样子的,直接改成
import ElButton from 'element-plus'
// 是不会提示报错了,但是并没有真正的引用对,要改成
import { ElButton, ElInput, ElIcon } from 'element-plus'
// 方可
  1. 到这里就把对应的(1, ‘month’)改成一周(7, ‘day’),就能实现输入框默认一个月变成一周

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

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

相关文章

我们是如何测试人工智能的(八)包含大模型的企业级智能客服系统拆解与测试方法 -- 大模型 RAG

大模型的缺陷 -- 幻觉 接触过 GPT 这样的大模型产品的同学应该都知道大模型的强大之处, 很多人都应该调戏过 GPT,跟 GPT 聊很多的天。 作为一个面向大众的对话机器人,GPT 明显是鹤立鸡群,在世界范围内还没有看到有能跟 GPT 扳手腕…

五款会让你爱不离手的编程工具,用了都说好,加班变得少。

作为一名“CV工程师” 勤勤恳恳地复制粘贴 没想到AI来了之后 连搬运都不用了! 融入了AI代码生成能力的工具 真的能代替程序员的位置吗? 看完这5个AI工具 咱们再来说结论吧! aiXcoder 在平时写代码的过程中,经常需要通过上…

flutter3_douyin:基于flutter3+dart3短视频直播实例|Flutter3.x仿抖音

flutter3-dylive 跨平台仿抖音短视频直播app实战项目。 全新原创基于flutter3.19.2dart3.3.0getx等技术开发仿抖音app实战项目。实现了类似抖音整屏丝滑式上下滑动视频、左右滑动切换页面模块,直播间进场/礼物动效,聊天等模块。 运用技术 编辑器&#x…

吴恩达2022机器学习专项课程(一) 4.2 梯度下降实践

问题预览/关键词 本节内容梯度下降更新w的公式梯度下降更新b的公式的含义α的含义为什么要控制梯度下降的幅度?导数项的含义为什么要控制梯度下降的方向?梯度下降何时结束?梯度下降算法收敛的含义正确更新梯度下降的顺序错误更新梯度下降的顺…

网络编程之流式套接字

流式套接字(SOCK_STREAM)是一种网络编程接口,它提供了一种面向连接的、可靠的、无差错和无重复的数据传输服务。这种服务保证了数据按照发送的顺序被接收,使得数据传输具有高度的稳定性和正确性。通常用于那些对数据的顺序和完整性…

【vue3学习笔记(一)】vue3简介;使用vue-cli创建工程;使用vite创建工程;分析工程结构;安装开发者工具

尚硅谷Vue2.0Vue3.0全套教程丨vuejs从入门到精通 对应课程136-140节 课程 P136节 《vue3简介》笔记 课程 P137节 《使用vue-cli创建工程》笔记 官方文档: https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create官方文档地址 查看vue-cli版本&#x…

不要盲目开抖店,这才是开店的正确流程,2024全新版教程

我是王路飞。 抖音小店和视频号小店,我更建议没有经验的新手去做抖音小店。 虽然现在抖音小店不属于是一个蓝海项目了,但它依旧是我们普通人借助抖音流量变现非常重要的一个渠道,甚至没有之一。 至于视频号小店,可以说是当下最…

【JSON2WEB】11 基于 Amis 角色功能权限设置页面

【JSON2WEB】01 WEB管理信息系统架构设计 【JSON2WEB】02 JSON2WEB初步UI设计 【JSON2WEB】03 go的模板包html/template的使用 【JSON2WEB】04 amis低代码前端框架介绍 【JSON2WEB】05 前端开发三件套 HTML CSS JavaScript 速成 【JSON2WEB】06 JSON2WEB前端框架搭建 【J…

油缸位置传感器871D-DW2NP524-N4

概述 油缸位置传感器是一种使用电感原理来检测物体接近的开关装置。它通过感应物体的电磁场来判断物体的位置,并将信号转化为电信号输出。当物体靠近或远离电感式接近开关时,物体的电磁场会改变,从而使接近开关产生不同的信号输出。电感式接…

Chrome 插件 tabs API 解析

Chrome.tabs API 解析 使用 chrome.tabs API 与浏览器的标签页系统进行交互,可以使用此 API 在浏览器中创建、修改和重新排列标签页 Tabs API 不仅提供操作和管理标签页的功能,还可以检测标签页的语言、截取屏幕截图,以及与标签页的内容脚本…

MySQL面试汇总(一)

MySQL 如何定位慢查询 如何优化慢查询 索引及其底层实现 索引是一个数据结构,可以帮助MySQL高效获取数据。 聚簇索引和非聚簇索引 覆盖索引 索引创建原则 联合索引

6. 学习方法和Java概述

文章目录 1)学习方法2)Java是什么? 1)学习方法 作为一个0基础入门的同学,在刚开始学习的时候,我们不要追求知识点的深度,而是要追求知识点的广度。简单来说,学一个知识点不要想的太…

TCP和UDP分别是什么?TCP和UDP的区别

在计算机网络通信中,TCP(Transmission Control Protocol)和UDP(User Datagram Protocol)是两种重要的传输层协议,它们在数据传输过程中发挥着关键作用。本文将深入探讨TCP和UDP的定义、特点以及它们之间的区…

【Qt】QDialog对话框

目录 一、概念 二、对话框的分类 2.1 模态对话框 2.2 非模态对话框 2.3 混合属性对话框 三、消息对话框QMessageBox 四、颜色对话框QColorDialog 五、文件对话框QFileDialog 六、字体对话框QFontDialog 七、输入对话框QInputDialog 一、概念 对话框是GUI程序中不可或…

MrDoc寻思文档 个人wiki搭建

通过Docker快速搭建个人wiki,开源wiki系统用于知识沉淀,教学管理,技术学习 部署步骤 ## 拉取 MrDoc 代码 ### 开源版: git clone https://gitee.com/zmister/MrDoc.git### 专业版: git clone https://{用户名}:{密码…

「媒体宣传」如何针对不同行业制定媒体邀约方案

传媒如春雨,润物细无声,大家好,我是51媒体网胡老师。 针对不同行业制定媒体邀约方案时,需要考虑行业特点、目标受众、媒体偏好以及市场趋势等因素。 一、懂行业 先弄清楚你的行业是啥样,有啥特别之处。 了解行业的热…

PPT没保存怎么恢复?3个方法(更新版)!

“我刚做完一个PPT,正准备保存的时候电脑没电自动关机了,打开电脑后才发现我的PPT没保存。这可怎么办?还有机会恢复吗?” 在日常办公和学习中,PowerPoint是制作演示文稿的重要工具。我们会在各种场景下使用它。但有时候…

鸿蒙OS开发实例:【工具类封装-页面路由】

import common from ohos.app.ability.common; import router from ohos.router 封装app内的页面之间跳转、app与app之间的跳转工具类 【使用要求】 DevEco Studio 3.1.1 Release api 9 【使用示例】 import MyRouterUtil from ../common/utils/MyRouterUtil MyRouterUtil…

【jmeter+ant+jenkins】之搭建 接口自动化测试平台

平台搭建 (1). 录制jmeter脚本 (2). 将jmeter的安装目录下的G:\jmeter\apache-jmeter-5.1.1\extras中,将 ”ant-jmeter-1.1.1.jar”文件放到 ant的lib目录下 (3). 配置jmeter的xml配置文件,并放在ant目录的bin目录下,使用ant编译验证jmeter的…

[linux初阶][vim-gcc-gdb] OneCharter: vim编辑器

一.vim编辑器基础 目录 一.vim编辑器基础 ①.vim的语法 ②vim的三种模式 ③三种模式的基本切换 ④各个模式下的一些操作 二.配置vim环境 ①手动配置(不推荐) ②自动配置(推荐) vim是vi的升级版,包含了更加丰富的功能. ①.vim的语法 vim [文件名] ②vim的三种模式 命令…