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…

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

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

星光/宝骏/缤果/长安 车机CarPlay盒子权限破解原理普及----码农版本

从 app 申请 usbdevice 权限说起,通用 app 申请 usbdevice 权限代码如下 一般通过监听 ACTION_USB_DEVICE_ATTACHED usb 设备插入广播获取 UsbDevice 设备,或者通过 UsbManager 枚举出我们感兴趣的 UsbDevice 设备 然后调用 requestPermission(UsbDevi…

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

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

Mac OS 开启原生NTFS读写功能

方法一: 使用终端命令授予读写移动硬盘的权限,但每次重插移动硬盘都要手动输入命令 (disk4s1是当前硬盘的标识,通过终端输入以下命令获取:diskutil list) diskutil unmount disk4s1 sudo mkdir /Volumes/disk4s1 sudo mount -t …

RedisTemplate的一些常用方法

RedisTemplate 是 Spring Data Redis 提供的一个用于与 Redis 进行交互的模板类,它封装了 Redis 的各种操作方法,提供了更加方便的使用方式。以下是 RedisTemplate 的一些常用方法: 操作字符串数据: // 设置字符串值 redisTempla…

【React】vite + react 项目,安装、配置、使用 less

安装配置 less 1 安装 less2 vite.config.js 进行相关配置3 使用 less 在 React 项目中使用 Less(一种 CSS 预处理器)可以让你更方便地管理样式。 以下是在 React 项目中使用 Less 的一般步骤: 1 安装 less npm install less -D2 vite.confi…

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等。 通过官方文档可以…

DolphinScheduler3.2.1 伪集群部署[二]

文章目录 DolphinScheduler 伪集群部署前置准备工作准备 DolphinScheduler 启动环境配置用户免密及权限配置机器 SSH 免密登陆启动 zookeeper 修改相关配置修改 install_env.sh 文件修改 dolphinscheduler_env.sh 文件 初始化数据库启动 DolphinScheduler登录 DolphinScheduler…

SOCKS5服务器(基于 C++11 实现)

项目地址:https://github.com/xukeawsl/socks-server

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; 我的基…