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

踩坑前端框架-iviewDatePicker时间选择年⽉⽇时分秒

前⾔ : 前段时间使iview框架进⾏后端管理系统开发时有选择时间(时分秒可选 )的需求。去查询iview的⽂档，组件DatePicker可以实现。⾸先，我们来看下iview的官⽅⽂档。

OK，既然官⽅⽂档上可以实现，那么我们就按照⽂档上的⽰例进⾏开发。

<br>

<br>

畜牧兽医学报

iview给DatePicker设置了 format=“yyyy-MM-dd HH:mm:ss” 格式，在选择⽇期后不是选择时间，⽽是默认填充了00:00:00。这样⽆法满⾜我需要设置到时分秒的需求。

那有没有办法在选择⽇期后⾃动跳出选择时间的⾯板呢？在翻阅iview的源码后，到了相关的解决⽅法。adizero crazy light

风切变解决⽅法出血热百科

1、给DatePicker 添加 ref 属性，绑定 on-change 事件。

2、在on-change事件内通过调⽤ onSelectionModeChange ⽅法，调取时间选择⾯板实操：

1、控件要设置以下属性，切记，⼀定不能format属性，否则不⽣效。

<DatePicker

type="datetime"

ref="starttime"

:value="startTimeVal"

唐健生

@on-change="startTimeChange('starttime')"

clearable

:editable="false"

placeholder="选择开始时间"

</DatePicker>

2、on-change⽅法后打开时间⾯板

startTimeChange(refName){

this.$refs[refName].onSelectionModeChange('time');

3、获取选择的值

王劲屹this.startTimeVal =this.$refs.starttime.visualValue

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

本文发布于:2024-09-21 01:47:31，感谢您对本站的认可！

标签：选择时间属性设置时分秒解决

留言与评论（共有 0 条评论）