div写input多选时间段标签，layui选择时间段

效果：

思路：图标绑定时间选择器,点击确定添加一个标签，点击×删除改标签

功能分析：
1、点击右边弹出选择时间弹框
效果：

html:

<div class="col-sm-4 time-box">
	<div class="time-left" id="timeArr">
    </div>
    <img id="rq" src="/img/baseData/time.png">
 </div>

js:

laydate.render({
            elem: '#tentList #rq',//绑定
            type: 'time',
            format: 'HH:mm', //指定时间格式
            range: true,
            btns: ['confirm'],
            done:function (value,date) {
            }
        });

2、点击弹框确定
js

var timeRangeArr=[];
layui.use('laydate', function () {
        var laydate = layui.laydate;
        //常规用法
        laydate.render({
            elem: '#tentList #rq',//绑定
            type: 'time',
            format: 'HH:mm', //指定时间格式
            range: true,
            btns: ['confirm'],
            done:function (value,date) {
                if (timeRangeArr.includes(value)){//数组中已存在
                    // 删除前面的添加后面
                    for (var i = 0 ;i<timeRangeArr.length;i++){
                        if (timeRangeArr[i]==value){
                            timeRangeArr.splice(i,1)//查找对应索引删除
                            var bq = '#time-'+i;
                            $(bq).remove();
                            break
                        }
                    }
                }
                timeRangeArr.push(value);
                $('#timeArr').html('');//先置空
                for (var i = 0 ;i<timeRangeArr.length;i++){
                    $('#timeArr').append(`<span class="time-item" id="time-${i}">
                                    ${timeRangeArr[i]}
                                    <span id="delTime" class="time-del" onclick="delTimeBtn('${timeRangeArr[i]}')">×</span>
                                </span>`)
                }
            }
        });
    })

3、点击×号删除
js

function delTimeBtn(data) {//删除时间
        // 匹配删除
        for (var i = 0 ;i<timeRangeArr.length;i++){
            if (timeRangeArr[i]==data){
                timeRangeArr.splice(i,1)//查找对应索引删除
                var bq = '#time-'+i;
                $(bq).remove();
                break
            }
        }  
    }

编辑页面回显：
js

 for (var i=0;i<timeRangeArr.length ;i++) {
                                $('#timeArr').append(`<span class="time-item" id="time-${i}">
                                    ${timeRangeArr[i]}
                                    <span id="delTime" class="time-del" onclick="delTimeBtn('${timeRangeArr[i]}')">×</span>
                                </span>`)
                            }

css:

 .time-box{
        height: 100px;
        border: 1px solid #ccc;
        border-radius: 4px;
        overflow-y: scroll;
        position: relative;
        width: 31%;
        margin-left: 15px;
        padding: 4px;
    }
    .time-item{
        display: inline-block;
        background-color: #cde69c;
        color: #82a266;
        margin-bottom: 4px;
        margin-right: 4px;
        padding: 2px 4px;
        border: 1px solid #82a266;
        border-radius: 5px
    }
    .time-choice{
        width: 10px;
        position: absolute;
        top: 35%;
        right: 9px;
    }
    .time-del{
        cursor: pointer;
    }
    #rq{
        position: absolute;
        top: 35%;
        right: 5px;
        width: 24px;
        height: 24px;
    }