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

 iView官方组件展示效果：

期望的最终效果：

为什么要修改期望效果？

项目需要只选择小时，分钟跟秒的不需要，而官方并没有直接相关的小时组件或者是设置显示成小时或分钟或秒的时间选择器，因为自己直接修改样式。

原生js 代码，如下：

  <script>   
     window.onload = function() {

            // change text of the panel left
            document.querySelector('.ivu-picker-panel-content-left .ivu-time-picker-header').innerText="开始小时";
            // change text of the panel right
            document.querySelector('.ivu-picker-panel-content-right .ivu-time-picker-header').innerText="结束小时";
            // get start and end time list
            var list = document.querySelectorAll('.ivu-time-picker-cells-list')
            list.forEach(function(item, index) {
                // hour of item change width, others set zero
                if (index === 0 || index === 3) {
                    item.style.width = '166px';
                    // ul li change width
                    let lis = item.querySelectorAll('.ivu-time-picker-cells-list ul li');

                    lis.forEach(function(li){
                        li.style.textAlign = "center";
                        li.style.paddingLeft = '0px';
                    })

                } else {
                    item.style.width = '0px';
                }
              
            })
        }
</script>

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

可以使用 disabled-hours disabled-minutes disabled-seconds 组合禁止用户选择某个时间。

使用 hide-disabled-options 可以直接把不可选择的项隐藏。

官方示例：