Layui时间选择设置只能选择整点半点,并隐藏秒钟部分

1.整点半点选择

处理思路：通过循环将使用不到的时间点去除掉，关键代码位于ready函数

//选择起止时间
layui.laydate.render({
	elem: '.laydate-times',
	type: "time",
	range: true,
	btns: ['confirm'],
	format: 'HH:mm', //设置日期格式
	//初始化事件
	ready: function (date) {
		var dom = $(".laydate-time-list").children("li");
		//i=选择控件中时分秒顺序，
		//比如这里是时间范围选择，需要选择两段时分秒，所以i=6，
		//秒选择部分被隐藏了，但实际还是存在
		//所以i = 1或i = 4分别对应两个分钟选择器
		for (var i = 0; i < dom.length; i++) {
			var li = $(dom[i]).children("ol").children("li")
			if (i == 1 || i == 4) {
				for (var j = 0; j < li.length; j++) {
					if ($(li[j]).text() != '00' && $(li[j]).text() != '30') {
						$(li[j]).remove();
					}
				}
			}
		}
	},
	//选择完成触发
	done: function (value, date, endDate) {
		
	}
});

2.隐藏秒选择部分

<style>
    /* 设置起止时间选择只展示时分，隐藏秒那一列 */
    .laydate-time-list {
        padding-bottom: 0;
        overflow: hidden;
    }

        .laydate-time-list > li {
            width: 50% !important;
        }

            .laydate-time-list > li:last-child {
                display: none;
            }

        .laydate-time-list ol li {
            width: 100% !important;
            padding-left: 0 !important;
            text-align: center !important;
        }
</style>

3.默认值处理

由于清除掉了非整点半点外的选项，但是结束分钟部分一直默认是59，这就导致了点开选择必须重选一次结束分钟，不然即使选择界面上显示的选中是30，实际上选出来的值也是59。
如果选择的是首尾项的话，那么可以用第二种通过ready方法实现比较好。
如果需要默认中间部分的话操作done可能会更方便快捷一点。
当然我个人对于前端不怎么擅长，所以ready方法具体能不能时间选中中间部分值我也不确定。
因为我这边的需求已经将可选值剔除到只剩两项了，所以我这边暂时也不需要考虑选中中间的情况，加上项目比较急也就没有特地去研究。

3.1 操作done函数

这里用了一个笨办法，即操作选择后事件done，强行变更选中后值

完整done方法如下

//value：显示项例如"00:00:00 - 23:59:59"
//date：开始时间
//endDate：结束时间
done: function (value, date, endDate) {
	var _row = getRowData(this.elem);//获取当前行数据
	_row.SortCode = getRowIndex(this.elem);//获取当前行号
	_row.StartTime = `${date.hours}:${date.minutes}:00`;//拼接开始时间
	//由于默认是59分，所以这里处理为半点
	if (endDate.minutes > 30) {
		endDate.minutes = 30;
	}
	_row.EndTime = `${endDate.hours}:${endDate.minutes}:59`;//拼接结束时间
	//由于去掉多余选项后直接确认选中，结束时间分钟部分默认59
	//所以这里自行拼接返回显示值，而不是直接用value
	//_row.StartEndTime = value;
	_row.StartEndTime = `${IsTens(date.hours)}:${IsTens(date.minutes)} - ${IsTens(endDate.hours)}:${IsTens(endDate.minutes)}`;
	layui.table.reloadData(tableId, _row, true);//更新表数据
}

完整代码

//tableId=layui数据表id
function rowEditBind(tableId) {
	function getRowData(elem) {
		var index = getRowIndex(elem);
		return layui.table.cache[tableId][index] || {};
	};
	function getRowIndex(elem) {
		var index = $(elem).closest('tr').data('index');
        return parseInt(index);
	}
	function IsTens(num) {
		if (num < 10) {
			num = '0' + num;
		}
		return num;
	}
	//选择起止时间
	layui.laydate.render({
		elem: '.laydate-times',
		type: "time",
		range: true,
		btns: ['confirm'],
		format: 'HH:mm', 
		ready: function (date) {
			var dom = $(".laydate-time-list").children("li");
			for (var i = 0; i < dom.length; i++) {
				var li = $(dom[i]).children("ol").children("li")
				if (i == 1) {
					for (var j = 0; j < li.length; j++) {
						if ($(li[j]).text() != '00' && $(li[j]).text() != '30') {
							$(li[j]).remove();
						}
					}
				} else if (i == 4) {
					for (var j = 0; j < li.length; j++) {
						//设置结束时间分钟部分默认选中30样式
						if ($(li[j]).text() == '30') {
							$(li[j])[0].setAttribute("class", 'layui-this');
                        }
						if ($(li[j]).text() != '00' && $(li[j]).text() != '30') {
							$(li[j]).remove();
						}
					}
				}
			}
		},
		done: function (value, date, endDate) {
			var _row = getRowData(this.elem);
			_row.SortCode = getRowIndex(this.elem);
			if (endDate.minutes > 30) {
				endDate.minutes = 30;
			}
			_row.StartEndTime = `${IsTens(date.hours)}:${IsTens(date.minutes)} - ${IsTens(endDate.hours)}:${IsTens(endDate.minutes)}`;
			layui.table.reloadData(tableId, _row, true);
		}
	});
}

3.2 操作ready函数

在ready方法中添加以下代码，由于默认分钟部分为59，所以在加载时给最后一个选项添加一个点击效果，从而达到更改默认选中分钟为30的效果

关键代码如下

//laydate-main-list-[1/0]：分别指时间范围控件的开始与结束时间部分，1=结束部分，0=开始部分
$(".laydate-main-list-1 .layui-laydate-content li ol li:last-child").click();

完整ready方法如下

ready: function (date) {
	var dom = $(".laydate-time-list").children("li");
	for (var i = 0; i < dom.length; i++) {
		var li = $(dom[i]).children("ol").children("li")
		if (i == 1 || i == 4){
			for (var j = 0; j < li.length; j++) {
				if ($(li[j]).text() != '00' && $(li[j]).text() != '30') {
					$(li[j]).remove();
				}
			}
		} 
	}
	//laydate-main-list-1分别指时间范围控件的开始与结束时间部分，1=结束部分，0=开始部分
	$(".laydate-main-list-1 .layui-laydate-content li ol li:last-child").click();
},

完整代码如下

//绑定行编辑，参数为layui数据表id
function rowEditBind(tableId) {
	function getRowData(elem) {
		var index = getRowIndex(elem);
		return layui.table.cache[tableId][index] || {};
	};
	function getRowIndex(elem) {
		var index = $(elem).closest('tr').data('index');
		return parseInt(index);
	}
	layui.laydate.render({
		elem: '.laydate-times',
		type: "time",
		range: true,
		btns: ['confirm'],
		format: 'HH:mm',
		ready: function (date) {
			var dom = $(".laydate-time-list").children("li");
			for (var i = 0; i < dom.length; i++) {
				var li = $(dom[i]).children("ol").children("li")
				if (i == 1 || i == 4) {
					for (var j = 0; j < li.length; j++) {
						if ($(li[j]).text() != '00' && $(li[j]).text() != '30') {
							$(li[j]).remove();
						}
					}
				}
			}
			$(".laydate-main-list-1 .layui-laydate-content li ol li:last-child").click();
		},
		done: function (value, date, endDate) {
			var _row = getRowData(this.elem);
			_row.SortCode = getRowIndex(this.elem);
			_row.StartEndTime = value;
			layui.table.reloadData(tableId, _row, true);
		}
	});
}

目前来说一共有两种方法实现选中默认值修改，如果有其他更好的方法欢迎指点。

最终效果如图：