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

iView官方组件展示效果：

期望的最终效果：

为什么要修改期望效果？

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

原生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
 9             var list = document.querySelectorAll('.ivu-time-picker-cells-list')
10             list.forEach(function(item, index) {
11                 // hour of item change width, others set zero
12                 if (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>

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

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

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

官方示例：

转载于:https://www.cnblogs.com/smallyi/p/10186270.html

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

android timepicker 不可编辑,iView -- TimePicker 自定义修改时间选择器选择时间面板样式...
期望的最终效果: 为什么要修改期望效果? 项目需要只选择小时,分钟跟秒的不需要,而官方并没有直接相关的小时组件或者是设置显示成小时或分钟或秒的时间选择器,因为自己直接修改样式. 原生js 代码,如下: ...
element-ui 修改时间选择器样式
因为elementUI的时间选择器el-date-picker是将元素直接挂载到页面的<body>中,而非自身元素下,所以使用/deep/穿透也是无法定位到元素的. 解决方案: 利用时间选 ...
android自定义滚轴选择器_Android自定义滚动式时间选择器（在他人基础上修改）...
尽管Android给我们提供了时间选择控件DatePicker和TimePicker(它们的使用方法可以参考我的这篇文章Android之日期时间选择控件DatePicker和TimePicker),但 ...
elementUI中table中自定义修改时间格式2020-10-26T10:00:00
问题描述: 前端使用el-table查询到后台的数据的某一列时间列默认是标准UTC格式,如果想按照自己想显示的格式获取年月日和时分秒进行显示怎么办 ? 方法一: elementUI中的table提供了 ...
elment ui 修改时间选择器的宽度及高度
一.html代码如下:用一个div包裹el-date-picker <div class="date-box"><el-date-pickerv-model=&q ...
自定义/修改微信二维码样式
在写项目的时候遇到的一个需求,登录和注册都可以通过扫描微信的二维码来实现,但是在做的时候发现微信有一些它自带的样式,并且无法通过CSS直接修改. 通过查微信的开发者文档发现是支持修改的 wxHandl ...
时间选择器(timepicker)
可以使用Slider拖动选择,也可以使用timespinner改变时间,或者手工填写. 自动判断位置效果: 源码: <!DOCTYPE html> <html xmlns=&quo ...
Android基于wheelView的自定义日期选择器(可拓展样式)
基于wheelView的自定义日期选择器项目要求效果图: 要求 "6月20 星期五" 这一项作为一个整体可以滑动,"7时"."48分"分别 ...
iOS-自定义起始时间选择器视图
概述自定义起始时间选择器视图, 调起时间选择器, 传值(起始时间/截止时间), 两者时间均要合理, 不能超过未来时间, 并且起始时间不能大于截止时间. 点击取消或空白处收起时间选择器. 详细代码下 ...

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

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

最新文章

热门文章