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;}

div写input多选时间段标签，layui选择时间段相关推荐

用 div 仿写 input 和 textarea 功能
div仿写input和textarea input不能换行,textarea也不能跟随内容多少而增加高度. contenteditable = true; <div class="ms ...
关于div、input、select标签的禁用
关于div.input.select标签的禁用前言 div禁用 input禁用 select禁用 textarea禁用总结前言这段时间自己要学一学原生的前端技术,遇到了前端界面的一个reado ...
2个网页跳来跳去_怎么写最优化的网页标题标签（Title Tag）？
通过简单的观察就可以发现: 排在搜索引擎搜索结果前几页的网页或网站中,一般是这个网页或网站的标题标签(Title Tag)中包含着搜索关键词.所以,反过来,要让自己网页或网站排到搜索结果的前列,网页的 ...
div contenteditable 换行_contenteditable跟style标签可真是天生一对
contenteditable是html的一个全局属性,可以大致理解为"可以使一个元素处于可编辑状态",像极了textarea,不过还是存在许多不足跟问题,比如没有change钩子 ...
内联式css样式，直接写在现有的HTML标签中
CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌入式和外部式三种.这一小节先来讲解内联式. 内联式css样式表就是把css代码直接写在现有的HTML标签中 ...
linux 脚本select菜单,Shell：如何写一个多选菜单的脚本
Blog:博客园个人翻译自How to Create a Multiple Choice Menu in Bash Scripts 目录多选菜单脚本介绍配置输入提示创建预定选项列表创建预选菜 ...
[html] 请使用一个div写出有三条横线的小图标
[html] 请使用一个div写出有三条横线的小图标 #menu{ width: 25px; height: 3px; border-top: 3px solid #0; border-bottom: ...
input复选框改变样式
今天有人问我input复选框要怎么改变样式,查了一下,特整理下来: <input type="checkbox">input[type="checkbox&q ...
写给省选前的自己V2
去年的这一天,我坐在电脑前,敲着"写给省选前的自己" 今年依然如此,只不过去年的自己和今年的自己确实改变了许多我又用了一年的时间去学OI,打过主席树,做了一些网络流的题目,也接触 ...

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

div写input多选时间段标签，layui选择时间段相关推荐

最新文章

热门文章