效果:
思路:图标绑定时间选择器,点击确定添加一个标签,点击×删除改标签
功能分析:
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;
}
版权声明:本文为weixin_43991257原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。