小伙伴投稿：ElementUI日期时间范围组件动态设置默认时间
最后更新于
这有帮助吗？
最后更新于
这有帮助吗？
抖音：
B站：
这个小伙伴的投稿我觉得挺有用
我们大家很可能以后会用到
就是这个日期和时间范围的选择
我们比如我们选一个日期
然后再指定两个时间
然后现在什么问题呢
就是他这个组件
默认支持设置一个默认时间
就是默认开始时间和默认结束时间
但是我们现在有个需求
就是说这个结束时间哈
他希望根据当前选择的日期
来动态指定
什么意思
就是比如今天是26号哈
比如结束日期是（选）25号
（不是今天）
那么我希望
这个结束时间就是默认的
23:59:59这样
但是呢如果我选择的是今天
那么我希望（比如说2号到26号）
我希望他的结束时间就是当前时间
比如当前是晚上8点
哎那就是这样
所以呢
他现在这个属性不支持动态的
所以呢这位小伙伴就没办法嘛
他就翻了源码
找了一个变通的实现方法
怎么实现的呢
就是给这个组件通过这个pickerOptions
注入了一个onPick
这个类似于事件吧
就是只要用户选择了这个时间（口误：日期）
就会走这里边
然后呢他在这里判断是不是今天啊
这些都不重要
主要是在这里
如果是今天
他就放一个他制定好的一个endTime（当前时间）
如果不是今天呢
那还是用这个23点
算出一个这个时间
调这个方法
我们来看什么什么效果哈
大家看啊
2号 比如到今天26号大家看
那他现在就是把当前时间放上来了
但是呢这个框就自动关闭了
我们再点一下
不是今天的
比如 25号
大家看：23:59:
这个没有问题
现在这个效果是对的
只是呢他希望这个弹窗先不要关闭
允许用户再去调整它
那怎么解决呢
我们先看一下啊
他现在用的是这个方法
这个最后一个参数
看起来
就像是来控制这个弹窗是否关闭的
但是呢我们看一下
它有点小问题
比如说我们现在还选25号结束
这个没有问题
但如果我们选到今天26号结束
大家看上面是对了
但是这个弹窗里的时间是不对的
所以导致什么问题呢
大家看我们一点确定
弹窗里时间就上去了
导致这个效果就不对了（应该是当前时间）
所以呢我们这个参数
还不能用这个参数来实现
怎么办呢
我们先去找到源码读一读
那怎么找源码呢
教大家怎么找哈
其实就在这个node_moduls里面找到它
这个element的UI的目录在这里
然后呢注意它打开之后
它有lib、package
src types
其实一般的组件都在这个package里边
大家看什么alert、aside什么的啊
我们找到datepicker
然后通常每一个目录里边哈
它都有一个最
就这个组件来说
它最外层的组件
它里边可能还嵌套一些其他组件
像这个就是哈
然后呢
刚才这个小伙伴调用了picker
这picker
就这个datePicker
这个组件里边还有个pick组件
所以我们搜一下
大家看在这里它有这个组件
咱先不管它
那因为我们今天用的是范围的
日期范围的
所以呢它用的是panel
里的这个panel date range
找到这个组件呢
我们往下看啊
这里边有一个input
它这个国际化的名叫start date
再往下还有一个start time
大家看
然后再往下
它还有end date和end time
所以
就相当于我们刚才看到的这个组件
里的上面这四个框
具体读代码的过程我就略过了哈
我直接说结论
我们就模拟它这个框的change事件
大家看啊
我们先找到就用结束时间吧
endTime吧
它是在调这个handle time input
和handle time change
其实我们就用这个handle time input
就可以了
我们找到它
这个方法
大家看它传了一个value
一个type
type一个是min
一个是Max
就是一个最小一个最大
那是不是我们可以调这个方法
我们在自己这个页面上先输出一下
看能不能找到它这个
handleTimeIput方法
pick点我们加一个输出
刷新一下，控制台打开
然后我们刚才加的是在今天
这种情况下
所以我们要结束时间选今天
注意大家看，有这个方法
相当于我们在这是可以调的
那就简单了
我们先随便传一个时间哈
我们传
三点吧
然后呢type等于Max
把这个注意掉
我们再看
效果
好
大家看啊
从2号到26号这块
虽然是三点
但是大家注意
大家看控制台报错了
我们看一下
就是它这个地方date是空了
我们看一下
报错哈：找不到空的getFullYear
就是这一行
这个date是空传
进来的我们再往上找看
这其实就是这个maxDate是空的
这个就有意思了
为什么它是空的呢
结果找了半天哈
其实原因就是
我们在调这个方法的时候
它这个maxDate还没赋值呢
我们看maxDate在哪赋的值
大家看他在这里取到max
然后复到这个this.maxDate
比如说当用户在选择这个范围的时候
他先调onPick方法
然后再去给maxDate复值
包括它下边还有个setTimeout
就10毫秒又复了一次
它可能是为了解决某一个bug哈
主要的问题是它先走了我们的onPick
就是我们这个方法是在onPick里
他先走了我们的onpick后
去给maxDate复制
所以我们在这执行这个方法
它容易报错
那为了保险起见
我们要在这个10毫秒以后
去执行我们这个代码
所以我们要在这 setTimeout 11毫秒
我们再来试一下哈
我把这个控台关掉
2号 比如到26号
大家看！现在是3点
这就没有问题了
我们在控制台
控台也没有什么报错
我们再选一下
大家看这是可以的了
所以呢如果不是今天
那就简单了
我们把这个再复制一下
不用他这个了
我们直接在下边这个就不用了
如果不是今天
那就永远都是23:59:
我们再来看一下
3号 ~ 25号
26号
大家看就是3点了
只不过呢
这个时间我们在这不写死
动态计算一个就可以了
这个我就不在视频里演示了啊
总结一下
其实就是如果想实现这个
时间的动态化
那我们就通过pickoption的onpick方法里
在这里边通过setTimeout
里面调picker的这个handleTimeInput
方法来实现
保险起见呢
我们可以把它调大一点
比如20毫秒
这个20毫
这样画就OK了