踩坑前端框架 - iview DatePicker 时间选择年月日时分秒

前言 : 前段时间使iview框架进行后端管理系统开发时有选择时间(时分秒可选 )的需求。去查询iview的文档，组件DatePicker可以实现。

首先，我们来看下iview的官方文档。

OK，既然官方文档上可以实现，那么我们就按照文档上的示例进行开发。

 	<br>
    <DatePicker type="datetimerange" placeholder="Select date and time" style="width: 300px"></DatePicker>
    <br>
    <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

按照上述方法即可使用iview DatePicker来选择精确的时分秒~踩坑，特此记录。。