【前端Vue】 iView时间控件选择年月日时分秒

前言

前段时间使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来选择精确的时分秒。