iview datepicker 选择日期后自动切换到时间 面板

客服说选择日期后要手动点击 选择时间 的按钮后才能选择时间,觉得步骤繁琐了,因此提出选中日期后自动切换至时间选项面板。对于这个需求,第一反应是 在API协助下,一定分分钟实现功能,结果并没有,寻求搜索引擎也没有找到解答,进入项目的issues 也有同学遇到了一样的需求,但是没有了解答;无奈~只能克服懒惰,硬着头皮参考组件源码了。
幸运的是顺利找到解决方式,思路及代码块如下:

  • 给需要实现此需求的 DatePicker 组件添加 ref 属性,和 on-change 事件
  • 在响应事件的方法中,给组件实例添加onSelectionModeChange方法

methods: {
        showTimePanel(refName){
            /* 此处的onSelectionModeChange方法,就是同点击 选择时间 按钮后触发的方法
          具体此方法的代码逻辑,可以下载组件源码查看*/
            this.$refs[refName].onSelectionModeChange('time');
        }
}

效果图:


需求是先后效果

搞定收工~

你可能感兴趣的:(iview datepicker 选择日期后自动切换到时间 面板)