前言
前段时间使iView
框架进行后端管理系统开发时有选择时间精确到时分秒可选的需求。去查询iView
的文档,组件DatePicker
可以实现。
首先,我们来看下iView
的官方文档。
OK,既然官方文档上可以实现,那么我们就按照文档上的示例进行开发。
<DatePicker type="datetimerange" placeholder="Select date and time" style="width: 300px"></DatePicker>
<DatePicker type="datetimerange" format="yyyy-MM-dd HH:mm:ss" placeholder="Select date and time" style="width: 300px"></DatePicker>
iView
给DatePicker
设置了format="yyyy-MM-dd HH:mm:ss
格式,在选择日期后不是选择时间,而是默认填充了00:00:00。这样无法满足我需要设置到时分秒的需求。
那有没有办法在选择日期后自动跳出选择时间的面板呢?在翻阅iView
的源码后,找到了相关的解决方法。
解决方法
1、给DatePicker
添加ref
属性,绑定on-change
事件。
2、在on-change
事件内通过调用onSelectionModeChange
方法,调取时间选择面板。
实操
1、控件要设置以下属性,切记,一定不能format属性,否则不生效。
type=“datetime”
ref=“starttime”
@on-change=“startTimeChange(‘starttime’)”
format=“yyyy-MM-dd HH:mm”(不要添加)
<DatePicker
type="datetime"
ref="starttime"
:value="startTimeVal"
@on-change="startTimeChange('starttime')"
clearable
:editable="false"
placeholder="选择开始时间"
style="width: 300px;margin-left: 20px">
</DatePicker>
2、on-change方法后打开时间面板
startTimeChange(refName) {
this.$refs[refName].onSelectionModeChange('time');
},
3、获取选择的值
this.startTimeVal = this.$refs.starttime.visualValue
按照上述方法即可使用DatePicker
来选择精确的时分秒。