layui时间选择器去掉秒并且动态修改限定时间范围

需求：完成一个08:00-22:00的两个时间选择器，第一个时间选择器为开始时间，第二个选择器为结束时间，第一个的时间必须早于第二个时间；

页面效果如下：

用了layui示例中的代码为：https://www.layui.com/demo/laydate.html ，全文复制代码，最后删减一部分。

首先上前端html代码：两个时间选择器，一个#test-limit3，一个#test-limit4

			

				

					完成时间：
					

						--
					
					

						这里以控制在8:00-22:00为例
					
				
			
		

需要引入两个js，一个是jquery，一个是layui.js

然后js部分：

使用format自定义需要的时间格式，

定义min\max时间最小\最大值，

ready,空间打开的初始回调函数，

done，选择完毕的回调函数，

重要的点是修改最大最小值，#test-limit3是修改最大值，#test-limit4修改最小值，

layui.use('laydate', function() {
				var laydate = layui.laydate;
				var startDate = laydate.render({
					elem: '#test-limit3',
					min: "08:00:00",
					max: "22:00:00",
					type: 'time',
					trigger:'click',
					ready:formatminutes,
					format:"HH:mm",
					done: function(value, date) {
						endDate.config.min = {
							date: date.date,
							year: date.year,
							month: date.month - 1, //关键
							minutes: date.minutes+1,
							seconds: date.seconds ,
							hours: date.hours
						};
					}
				});
				var endDate = laydate.render({
					elem: '#test-limit4',
					min:'08:00:00',
					max: "22:00:00",
					type: 'time',
					format:"HH:mm",
					ready:formatminutes,
					done: function(value,date) {
						startDate.config.max = {
							date: date.date,
							year: date.year,
							month: date.month - 1, //关键
							minutes: date.minutes-1,
							seconds: date.seconds,
							hours: date.hours
						}
					}
				});
				
				function formatminutes(date){
					console.log(date)
					$($('.laydate-time-list li ol')[2]).find('li').remove();
				}
			})

上面代码就删除掉秒和动态变化起始时间和结束时间了。

最后添加一点css：

.laydate-time-list li:last-child{
				display: none;
				width: 0;
			}
			.laydate-time-list>li:not(:last-child){
				width: 50%;
			}
			.layui-laydate-main{
				width: 220px;
			}

以上就全部完成了。