使用Vue设置iview组件中Datepicture插件显示默认日期

时间:2024-04-12 12:48:09

要实现功能的是进入该页面,时间选择框默认显示当前日期及其前七天的日期时间段,也可以自己另行修改
iview的官方API中有设置start-date属性来设置默认显示,但是设置这个属性只是控制的面板有显示,选择框并不显示时间,如下图所示

使用Vue设置iview组件中Datepicture插件显示默认日期

我用这种办法并没有实现,如果有大神实现可以分享一下
在看时间选择器的时候发现一个:value的用法,[时间选择器]
(https://www.iviewui.com/components/time-picker)可以参考此官方文档的第二案例,默认显示时间,具体实现代码如下所示:
第一步:用:value绑定一个getdate数组,用来存放开始日期和结束日期,因为我设置type是daterange就是双面板,所以存放一个数组,如果type是date类型,可以设置为空字符串类型:
使用Vue设置iview组件中Datepicture插件显示默认日期

第二步:定义nowTime和weekBeforeTime全局变量来存放当前时间和从当前推迟七天的时间,即选择框内的起始时间,最后将这两个时间赋值给getdate即可:

使用Vue设置iview组件中Datepicture插件显示默认日期

此方法参看原作设置默认日期但是此作者的组件是element,和iview稍有差距,在此基础上根据iview的组件做了修改,最终实现如下效果:

使用Vue设置iview组件中Datepicture插件显示默认日期

如果有更好的方法,欢迎一起交流