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

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

期望的最终效果：

为什么要修改期望效果？

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

原⽣js 代码，如下：

1 <script>

2 window.onload = function() {

3

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');

16

17 lis.forEach(function(li){

18 li.style.textAlign = "center";

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

20 })

21

22 } else {

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

24 }

25

26 })

27 }

28 </script>

⚠ 注意:

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

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

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

官⽅⽰例：

有其他疑问的,欢迎评论