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 可以直接把不可選擇的項隱藏。

官方示例：