laydate在选择时间框中规定分钟的值

1.背景

今天使用laydate遇到一个问题，就是在我们公司，加班的话，需要填写加班申请，加班申请必须指定开始时间和结束时间，且加班时长必须是5的倍数，比如说加班2小时，2.5、 3、 3.5等，这样一来，加班时间选择只能选择18:00-20:00 或者18:30-20:30 必须是几点半，或者整点，所以在使用layui选择的时间的时候，就不能再出现像下面这种时间选择框了。

 

image.png

 

而是这种效果。

 

image.png

一开始没什么思路，上网去搜资料，layui论坛里搜到的结果如下，还是有人和我遇到一样的问题的。

image.png

 

管理员说暂时不行，注意这条帖子是15年的，然后我在layui官网里找依然没有找到这种用法，没办法只能自己摸索着写写了。

2.修改laydate初体验

既然要修改laydate，肯定需要找一个能触发事件的方法，在官网里找到一个change方法。

image.png

貌似挺好用的，在日期和时间有变化的时候写个方法执行下应该就可以了，但是事与愿违，我想应该是laydate里面的一个bug把，在日期切换的时候，可以触发change函数，但是在时间切换的时候，触发不了这个回调函数。嗯，下面这位兄台和我遇到的问题一样。

image.png

这地方解释下，为什么非要选择时间才要触发这个回调函数呢？因为只有点击了选择时间之后才会出来对应时分秒。否则页面上是没有这些元素的。类似下图。

image.png

注意看table下面，这时候是日期选择，table里面就是对应的日期。当我们点击选择时间之后看下图。

image.png

多出来了一个ul元素，下面对应的ol li 就是对应的咱们现在页面上的时分秒。所以想要操作这些时分秒，应该是要在选择时分秒的时候触发change回调函数才有用。否则页面上都找不到这些元素，也就没法操作了。
修改选择时间触发change函数需要修改下laydate.js，如下图。

image.png

原来这一段代码写的是。

 

(n.endDate || "time" === a.type ) && n.done(null, "change")

这地方只写了一个类型time。所以咱们稍稍做下修改。

(n.endDate || ("time" === a.type || "datetime" === a.type)) && n.done(null, "change")

这样的话，点击时分秒的时候，也可以触发change函数了。注意一点，这里我修改的是module里面的laydate，所以必须有这个js才有用，如果你用的layui.all.js ，请酌情修改。
回调函数能用了，接下来就是要分析laydate的Dom结构了。

 

image.png

 

结构应该是挺清晰的，ul下包含li元素，接下有ol和li。知道这些就好办了，先看下代码在讲吧。

 laydate.render({
                elem: '#StartTime',
                type: 'datetime',
                min: -10,
                max: nowTime,
                format: 'yyyy/MM/dd HH:mm:ss',
                change: function (date) {
                    var dateortime = $(".layui-laydate").find(".layui-laydate-footer").find("span").text().substr(0, 4);
                    if (dateortime == "返回日期") {
                        var aa = $(".laydate-time-list li ol")[1];
                        var showtime = $($(".laydate-time-list li ol")[1]).find("li");
                        for (var i = 0; i < showtime.length; i++) {
                            var t00 = showtime[i].innerText;
                            if (t00 != "00" && t00 != "30") {
                                showtime[i].remove()
                            }
                        }
                        $($(".laydate-time-list li ol")[2]).find("li").remove();  //清空秒
                    }
                }
            });

注意看change里面，当我监听到日期或者时间变化的时候，首先判断一下laydate页面显示的时间，还是日期，通过 左下角显示的是选择时间还是返回日期就可以知道当前页面是日期还是时间，如果是时间，获取class名为laydate-time-list下的li标签中的ol标签，当然是第二个ol标签，第一个ol是时，第二个是分。咱们要修改的是分钟。
然后获取分钟下所有的li标签，这个li标签就是00-59了，然后就好办了，获取li标签中的值，判断一下是不是00或者30，如果是呢就不用管，如果不是就把对应的li标签remove掉就行了。好了至此，代码已经讲完了，看来只要善于思考，大多数问题还是可以解决的。放一张效果图。

image.png

好了就说这么多。
Study hard and make progress every day.

 

更多学习资料请关注"爱游戏爱编程"。

 

爱游戏爱编程.jpg