网站建设文化传播有限公司,wordpress交易系统,网站建设走的路线风格,能源网站开发目前遇到一个问题#xff0c;在使用element-plus中的日期时间选择器el-date-picker#xff0c;type为datetimerange时#xff0c;展示的日期选择面板有两个输入框#xff0c;开始时间和结束时间#xff0c;element-plus只提供了default-time 使用datetimerange进行范围选择…目前遇到一个问题在使用element-plus中的日期时间选择器el-date-pickertype为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中文网 找到了文件后怎么把它融合到自己的项目就是个问题了
先将代码从git上down下来找到date-picker文件夹可以将整个都copy下来放到你本地的components文件夹内这时的文件都是红色的因为有很多引用并没有需要一个一个进行修改以下我具体写一下修改的部分
import { useNamespace } from element-plus/hooks
修改成 import { useNamespace } from element-plusimport {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就行修改即可到这把需要修改的红色都修改完了将使用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, ‘month’)改成一周(7, ‘day’)就能实现输入框默认一个月变成一周
