文本框
<div class="layui-form-item"> <label class="layui-form-label" for=""><span class="star">*</span>名称:</label> <div class="layui-input-inline" style="width: 300px;"> <input class="layui-input" type="text" id="" value="" placeholder="请输入正确的名称" maxlength="50" autocomplete="off" onkeyup="value=value.replace(/\s+/g,'')"/> </div> </div>单选框
<div class="layui-form-item"> <label class="layui-form-label" for=""><span class="star">*</span>名称:</label> <div class="layui-input-inline" style="width: 330px;margin-top: -6px;"> <input type="radio" name="coopMode" value="1" title="内容1" lay-filter="" checked="checked" style="margin-right:10px" /> <input type="radio" name="coopMode" value="2" title="内容2" lay-filter="" /> </div> <br/> </div>时间框
<div class="layui-form-item"> <label class="layui-form-label"><span class="star">*</span>开始时间:<i title="提示信息" class="layui-icon layui-icon-tips tipsIcon"></i></label> <div class="layui-input-inline" style="width: 300px;"> <input class="layui-input" id="startTime" name="startTime" type="text" placeholder="开始时间" readonly autocomplete="on" value="" style="cursor:pointer;"> </div> <label class="layui-form-label" for="endTime"><span class="star">*</span>结束时间:</label> <div class="layui-input-inline" style="width: 300px;"> <input class="layui-input" id="endTime" name="endTime" type="text" placeholder="结束时间" readonly autocomplete="on" value="" style="cursor:pointer;"> </div> </div>时间框2
<div class="layui-form-item"> <label class="layui-form-label" for=""><span class="star">*</span>时间范围:</label> <div class="layui-input-inline"> <input type="text" class="layui-input" name="timename" id="timeid" placeholder=" - " lay-key="12" style="width: 295px;cursor:pointer;" readonly> </div> </div> let laydate = layui.laydate; //执行一个laydate实例 laydate.render({ elem: '#timeid' //指定元素 ,type: 'date' ,range:true //如果true,则展示的是一个范围,否则是一个值 ,value:'', //必须遵循format参数设定的格式 done:function (value) { } });下拉框 下拉框选中后的事件触发,可以用于联动,动态展示和隐藏其他组件
<div class="layui-form-item"> <label class="layui-form-label"><span class="star">*</span>名称:</label> <div class="layui-input-inline"> <select name="" lay-filter="eventName" id="" class="layui-input"> <option value="" selected>名称</option> </select> </div> <br/> </div> form.on('select(eventName)',function (data) { var value= parseInt(data.value); if(value!= '' && value== 1){ layer.msg('1'); }else if(value!='' && value== 2){ layer.msg('2'); } });