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.mzph.cn/news/776514.shtml

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

相关文章

Visio中存在问题的解决方法

公式缩放 mathtype公式在visio缩放之后,出现了变形。 解决方法:每次输入公式都通过 插入->对象->mathType Equation 新建一个公式。可以避免 注:网上有的说在word中使用mathtype编写公式,之后复制到visio中。 插入波形 选择…

LinkedIn 互联网架构扩展简史

LinkedIn成立于 2003 年,其目标是连接到您的网络以获得更好的工作机会。第一周只有 2,700 名会员。时间快进了很多年,LinkedIn 的产品组合、会员基础和服务器负载都取得了巨大的增长。 如今,LinkedIn 在全球运营,拥有超过 3.5 亿会…

fuzzywuzzy,一个好用的 Python 库!

目录 前言 安装 基本功能 1. 字符串相似度比较 2. 模糊匹配与排序 实际应用场景 1. 数据清洗 2. 文本匹配与搜索 3. 搜索引擎优化 总结 前言 大家好,今天为大家分享一个好用的 Python 库 - fuzzywuzzy Github地址:https://github.com/seatgeek/fu…

企业如何乘上跨境电商的风口?

近年来,国内跨境电商成为内贸外贸发展的一个亮点,国家工作会议也提出:“要加快培育外贸新动能,巩固外贸外资基本盘,拓展中间品贸易、服务贸易、数字贸易、跨境电商出口”。多因素推动下,使得跨境电商成为我…

使用pytorch构建一个无监督的深度卷积GAN网络模型

本文为此系列的第二篇DCGAN,上一篇为初级的GAN。普通GAN有训练不稳定、容易陷入局部最优等问题,DCGAN相对于普通GAN的优点是能够生成更加逼真、清晰的图像。 因为DCGAN是在GAN的基础上的改造,所以本篇只针对GAN的改造点进行讲解,其…

Python算法100例-4.6 歌星大奖赛

完整源代码项目地址,关注博主私信源代码后可获取 1.问题描述2.问题分析3.算法设计4.确定程序框架5.完整的程序6.问题拓展7.知识点补充 1.问题描述 在歌星大奖赛中,有10个评委为参赛的选手打分,分数为1~100分。选手最…

Spring Cloud+Spring Alibaba笔记

Spring CloudSpring Alibaba 文章目录 Spring CloudSpring AlibabaNacos服务发现配置中心 OpenFeign超时机制开启httpclient5重试机制开启日志 SeataSentinel流量控制熔断降级热点控制规则持久化集成 OpenFeign集成 Gateway MicrometerZipKinGateway路由断言过滤器 Nacos 服务…

TikTok养号保姆级教程:学好这9招,你就是流量宠儿!

01 什么是养号? 在回答这个问题之前,我们首先要明白Tiktok智能推荐机制,也就是著名TikTok算法。 每个创作者发布视频时,TikTok都会根据视频内容、视频发布地区、标题内容进行特征识别,来判断视频可能会有哪些人群喜欢…

鱼哥赠书活动第14期:看完这本《数字化运维》掌握数字化运维方法,构建数字化运维体系

鱼哥赠书活动第14期:看完这本《数字化运维》掌握数字化运维方法,构建数字化运维体系 主要内容:读者对象:赠书抽奖规则:往期赠书福利: 数字化转型已经成为大势所趋,各行各业正朝着数字化方向转型&#xff0c…

SpringBoot3集成PostgreSQL

标签:PostgreSQL.Druid.Mybatis.Plus; 一、简介 PostgreSQL是一个功能强大的开源数据库系统,具有可靠性、稳定性、数据一致性等特点,且可以运行在所有主流操作系统上,包括Linux、Unix、Windows等。 通过官方文档可以…

MySQL数据库高级语句

文章目录 MySQL高级语句older by 排序区间判断查询或与且(or 与and)嵌套查询(多条件)查询不重复记录distinctcount 计数限制结果条目limit别名as常用通配符嵌套查询(子查询)同表不同表嵌套查询还能用于删除…

C语言例4-36:求Fibonacci数列的前40个数

教材优化代码如下&#xff1a; //求Fibonacci数列的前40个数 #include<stdio.h> int main(void) {long int f11,f21;int i1;for(;i<20;i){printf("%15ld%15ld",f1,f2);if(i%20)printf("\n");f1f2;f2f1;}return 0; } 结果如下&#xff1a; 我的基…

IC-随便记

1、移远通信---通信模组 物联网解决方案供应商&#xff0c;可提供完备的IoT产品和服务&#xff0c;涵盖蜂窝模组(5G/4G/3G/2G/LPWA)、车载前装模组、智能模组&#xff08;5G/4G/边缘计算&#xff09;、短距离通信模组(Wi-Fi&BT)、GNSS定位模组、卫星通信模组、天线等硬件产…

Radio Silence for mac 好用的防火墙软件

Radio Silence for Mac是一款功能强大的网络防火墙软件&#xff0c;专为Mac用户设计&#xff0c;旨在保护用户的隐私和网络安全。它具备实时网络监视和控制功能&#xff0c;可以精确显示每个网络连接的状态&#xff0c;让用户轻松掌握网络活动情况。 软件下载&#xff1a;Radio…

DNS 服务 Unbound 部署最佳实践

文章目录 安装unbound-control配置启动服务测试 参考&#xff1a; 官网地址&#xff1a;https://nlnetlabs.nl/projects/unbound/about/ 详细文档&#xff1a;https://unbound.docs.nlnetlabs.nl/en/latest/index.html DNS服务Unbound部署于使用 https://cloud.tencent.com/…

Redis项目实战

本文用用代码演示Redis实现分布式缓存、分布式锁、接口幂等性、接口防刷的功能。 课程地址&#xff1a;Redis实战系列-课程大纲_哔哩哔哩_bilibili 目录 一. 新建springBoot项目整合Redis 二. Redis实现分布式缓存 2.1 原理及好处 2.2 数据准备 2.3 Redis实现分布式缓存…

知行之桥EDI系统功能介绍——FlatFile 端口介绍

FlatFile 端口能够实现平面文件与XML文件的互相转换。 每个 Flat File 端口配置一个特定的平面文件格式&#xff0c;从而实现与 XML 格式的互相转换。Flat File 端口有两个主要的模式&#xff1a; Position DelimitedCharacter Delimited 对于 Position Delimited 平面文件&a…

【Git篇】复习git

文章目录 &#x1f354;什么是git⭐git和svn的区别 &#x1f354;搭建本地仓库&#x1f354;克隆远程仓库&#x1f6f8;git常用命令 &#x1f354;什么是git Git是一种分布式版本控制系统&#xff0c;它可以追踪文件的变化、协调多人在同一个项目上的工作、恢复文件的旧版本等…

在宝塔面板中,为自己的云服务器安装SSL证书,为所搭建的网站启用https(主要部分攻略)

前提条件 My HTTP website is running Nginx on Debian 10&#xff08;或者11&#xff09; 时间&#xff1a;2024-3-28 16:25:52 你的网站部署在Debain 10&#xff08;或者11&#xff09;的 Nginx上 安装单域名证书&#xff08;默认&#xff09;&#xff08;非泛域名&#xf…