iview 自定义时间选择器组件_使用Vue设置iview组件中Datepicture插件显示默认日期...

标签：

要实现功能的是进入该页面，时间选择框默认显示当前日期及其前七天的日期时间段，也可以自己另行修改

iview的官方API中有设置start-date属性来设置默认显示，但是设置这个属性只是控制的面板有显示，选择框并不显示时间，如下图所示

我用这种办法并没有实现，如果有大神实现可以分享一下

在看时间选择器的时候发现一个:value的用法，[时间选择器]

(https://www.iviewui.com/components/time-picker)可以参考此官方文档的第二案例，默认显示时间，具体实现代码如下所示：

第一步：用:value绑定一个getdate数组，用来存放开始日期和结束日期，因为我设置type是daterange就是双面板，所以存放一个数组，如果type是date类型,可以设置为空字符串类型：

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

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

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

标签：

来源： https://blog.csdn.net/yingfengxuewu/article/details/83305213