iView--TimePicker自定义修改时间选择器选择时间面板样式

iView--TimePicker⾃定义修改时间选择器选择时间⾯板样式展⽰效果：

期望的最终效果：

为什么要修改期望效果？

项⽬需要只选择⼩时，分钟跟秒的不需要，⽽官⽅并没有直接相关的⼩时组件或者是设置显⽰成⼩时或分钟或秒的时间选择器，因为⾃⼰直接修改样式。

原⽣js 代码，如下：

1 <script>

2 load = function() {

4// change text of the panel left

5 document.querySelector('.ivu-picker-panel-content-left .ivu-time-picker-header').innerText="开始⼩时";

6// change text of the panel right

保险电子商务

7 document.querySelector('.ivu-picker-panel-content-right .ivu-time-picker-header').innerText=

"结束⼩时";

一时性起8// get start and end time list

9var list = document.querySelectorAll('.ivu-time-picker-cells-list')

10 list.forEach(function(item, index) {

11// hour of item change width, others set zero

12if (index === 0 || index === 3) {

13 item.style.width = '166px';

14// ul li change width

15 let lis = item.querySelectorAll('.ivu-time-picker-cells-list ul li');

17 lis.forEach(function(li){

18 Align = "center";雅特士

r440方向盘

19 li.style.paddingLeft = '0px';

20 })

22 } else {

23 item.style.width = '0px';

24 }

26 })

27 }

28 </script>

⚠ 注意:

关于js调⽤的样式, 为组件本⾝就有的

此外，我是事先对分，秒列的设置了不可⽤，跟隐藏效果，

可以使⽤disabled-hours disabled-minutes disabled-seconds组合禁⽌⽤户选择某个时间。使⽤hide-disabled-options可以直接把不可选择的项隐藏。

官⽅⽰例：

气体保护焊丝有其他疑问的，欢迎评论

>洁银

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

标签：时间选择疑问修改不可焊丝保护样式

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