layui 同時繫結多個日期
阿新 • • 發佈：2019-02-02
一、固定多個日期
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>test.html</title> <meta charset="utf-8" /> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="layui/css/layui.css" media="all"> <script src="layui/layui.js"></script> </head> <body> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"> <legend>同時繫結多個</legend> </fieldset> <input type="text" class="layui-input starttime" placeholder="yyyy-MM-dd"> <input type="text" class="layui-input starttime" placeholder="yyyy-MM-dd"> <input type="text" class="layui-input starttime" placeholder="yyyy-MM-dd"> <script> layui.use('laydate', function(){ var laydate = layui.laydate; //同時繫結多個 lay('.starttime').each(function(){ laydate.render({ elem: this ,trigger: 'click' }); }); }); </script> </body> </html>
二，動態增加日期，需要重新laydate渲染
把這個程式碼放到事件那裡，比如點選的事件那裡，就不能放到最底部那裡，
//同時繫結多個
layui.use('laydate', function(){
var laydate = layui.laydate;
lay('.starttime').each(function(){
laydate.render({
elem: this
,trigger: 'click'
});
});
});例子程式碼說明：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>直播課程管理</title> <link rel="stylesheet" href="__STATIC__/layui/css/layui.css" media="all"> <script src="__STATIC__/layui/layui.js"></script> <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> ////////新增一行、刪除一行封裝方法/////// /** * 為table指定行新增一行 * * tab 表id * row 行數，如：0->第一行 1->第二行 -2->倒數第二行 -1->最後一行 * trHtml 新增行的html程式碼 * */ function addTr(tab, row, trHtml,tbResponse){ //獲取table最後一行 $("#tab tr:last") //獲取table第一行 $("#tab tr").eq(0) //獲取table倒數第二行 $("#tab tr").eq(-2) // var $tr=$("#"+tab+" tr").eq(row); //var $tr=$("#tab tr").eq(row); var tr=$("#tab"+tbResponse+" tbody").eq(row); if(tr.size()==0){ alert("指定的table id或行數不存在！"); return; } tr.before(trHtml); //同時繫結多個 layui.use('laydate', function(){ var laydate = layui.laydate; lay('.starttime').each(function(){ laydate.render({ elem: this ,trigger: 'click' }); }); }); } function delTr(ckb){ //獲取選中的複選框，然後迴圈遍歷刪除 var ckbs=$("input[name="+ckb+"]:checked"); //var id_id=$("input[name="+ckb+"]:checked").val(); if(ckbs.size()==0){ alert("要刪除指定行，需選中要刪除的行！"); return; } var arr = new Array() ; ckbs.each(function(){ $(this).parent().parent().remove(); //alert($(this).val()); if(isNaN($(this).val())){ k=0; }else{ k=1; } arr.push($(this).val()); }); // alert(k); if(k==1){ layer.open({ type: 2, title: '刪除直播課程', maxmin: true, shade: 0.6, area: ['20%', '20%'], content: '{$_M[url][own_form]}a=do_del_class_course&id='+arr, //content: id,//網址 end: function(){ // layer.msg('刪除成功！'); } }); } } /** * 全選 * * allCkb 全選複選框的id * items 複選框的name */ function allCheck(allCkb, items){ $("#"+allCkb).click(function(){ $('[name='+items+']:checkbox').attr("checked", this.checked ); }); } ////////新增一行、刪除一行測試方法/////// $(function(){ //全選 allCheck("allCkb", "ckb"); }); function addTr2(tab, row,tbResponse){ var trHtml="<tr align='center'><td><input type='hidden' name='ccid[]' value='a'><input value='b' type='checkbox' name='ckb' lay-skin='primary' ></td><td><input type='text' name='title[]' lay-verify='required' class='layui-input' style='width:100%;' value='' placeholder='標題'></td><td><input type='text' name='starttime[]' lay-verify='required' class='layui-input starttime' style='width:100%;' value='' placeholder='開始時間'></td><td><input type='text' name='classhour[]' class='layui-input' style='width:100%;' value='30' placeholder='課時' lay-verify='required'><input type='hidden' name='bigclass[]' value='"+tbResponse+"'></td><td></td><td></td></tr>"; addTr(tab, row, trHtml,tbResponse); } function delTr2(){ delTr('ckb'); } </script> </head> <body style="background-color: #FFFFFF;"> <!-- 你的HTML程式碼 --> <!-- 表格 --> <div class="layui-fluid" style="margin: 20px;"> <fieldset class="layui-elem-field"> <legend>增加/修改章節</legend> <div class="layui-field-box"> <form class="layui-form layui-form-pane" action="{:url('course_add',['pid'=>$pid,'cid'=>$cid,'id'=>$id])}" method="post"> <div class="layui-form-item"> <div class="layui-inline"> <label class="layui-form-label">標題</label> <div class="layui-input-inline"> <input name="title" lay-verify="required" autocomplete="off" placeholder="請輸入章節標題" class="layui-input" type="text" value="{$c_rs.title}"> </div> </div> <div class="layui-inline"> <label class="layui-form-label">排序</label> <div class="layui-input-inline"> <input name="sort" lay-verify="required|number" autocomplete="off" placeholder="請輸入數字" class="layui-input" type="text" value="{$c_rs.sort}"> </div> <div class="layui-form-mid layui-word-aux">越大越前</div> </div> <div class="layui-inline"> <button class="layui-btn" lay-submit lay-filter="formDemo">{empty name="$id"}增加章{else /}修改章{/empty}</button> </div> </div> </form> </div> </fieldset> <form action="{:url('course_add',['pid'=>$pid,'cid'=>$cid,'id'=>$id])}" method="post"> <div class="layui-collapse"> {volist name="res" id="v"} <div class="layui-colla-item"> <h2 class="layui-colla-title">{$v.title} <button class="layui-btn layui-btn-primary layui-btn-xs">排序:{$v.sort}</button><a href="{:url('course',['pid'=>$pid,'cid'=>$cid,'id'=>$v.id])}" class="layui-btn layui-btn-normal layui-btn-xs">修改</a></h2> <div class="layui-colla-content layui-show"> <a href='javascript:;' onclick="addTr2('tab', -1,{$v.id})" class="layui-btn layui-btn-warm layui-btn-xs"><i class='fa fa-plus-circle'></i>增加直播</a><input name="submit" type="button" value="刪除直播" class="layui-btn layui-btn-xs layui-btn-primary" style="margin-right:20px;" onclick="delTr2()"> <table class="layui-table" id="tab{$v.id}"> <colgroup> <col width="80"> <col width="300"> <col width="190"> <col width="100"> <col width="190"> <col > </colgroup> <thead> <tr> <th><input lay-skin="primary" type="checkbox" id="quanxuan{$v.id}" value="{$v.id}" onclick="isQuanxuan({$v.id})">全選</th> <th>標題</th> <th>開始時間</th> <th>課時(分)</th> <th>結束時間</th> <th>直播</th> </tr> </thead> <tbody> {volist name="v.child" id="v2"} <tr> <td><input type='hidden' name='ccid[]' value='{$val2['id']}'><input type='checkbox' value='{$val2['id']}' name='ckb' lay-skin='primary' {$checked}{$checked2}></td> <td><input type='text' name='title[]' class='layui-input' style='width:100%;' value='{$val2['title']}' placeholder='標題'></td> <td>{$vl2}<input type='text' name='starttime[]' {$trbgc} class='layui-input' style='width:100%;{$sbc}' value='{$vl}' onclick="layui.laydate({elem: this, istime: true, format: 'YYYY-MM-DD hh:mm:ss'})"></td> <td><input type='text' name='classhour[]' class='layui-input' style='width:100%;' value='{$val2['classhour']}' placeholder='課時'></td> <td>{$val2['endtime']}<input type="hidden" name="bigclass[]" value="{$val['id']}"></td> <td>{$ebt} {$live1} {$b1} {$b2}</td><!--//直播 lay-id="課程ID|班型ID|章節ID|教師ID|教務ID"--> </tr> {/volist} </tbody> </table> </div> </div> {/volist} </div> <blockquote class="layui-elem-quote" style="margin-top: 10px;"> <button class="layui-btn" lay-submit lay-filter="formDemo">立即儲存</button> </blockquote> </form> <script> //點選全選 // var qx=false; function isQuanxuan(qxNum){ var qx=$("#quanxuan"+qxNum).prop("checked"); console.log(qx) if(qx){ $("#tab"+qxNum+" input[type='checkbox']").each(function(){ $(this).prop("checked",true); }) //qx=false; }else{ $("#tab"+qxNum+" input[type='checkbox']").each(function(){ $(this).prop("checked",false); }) //qx=true; } } $(document).on("blur","input",function(){ if($(this).val()!=''){ $(this).parents("tr").children("td").first().children().eq(1).attr("checked",true); }else{ $(this).parents("tr").children("td").first().children().eq(1).attr("checked",false); } }) </script> <script> //注意：摺疊面板 依賴 element 模組，否則無法進行功能性操作 layui.use(['layer', 'form','element','laydate'], function(){ var element = layui.element, $ = layui.jquery, laydate = layui.laydate, form = layui.form, layer = layui.layer; //觀看直播 $(document).on("click",".look_live",function(){ var id = $(this).attr("lay-id"); var strs= new Array(); //定義一陣列 strs=id.split("-"); //字元分割 id0= strs[0]; id1= strs[1]; id2= strs[2]; id3= strs[3]; id4= strs[4]; layer.ready(function(){ layer.open({ type: 2, title: '直播', maxmin: true, shade: 0.6, area: ['90%', '95%'], content: '{$_M[url][own_form]}a=do_look_live&pid='+id0+'&cid='+id1+'&ccid='+id2+'&teachers_id='+id3+'&jiaowu_user_id='+id4, //content: id,//網址 end: function(){ //self.location='{$_M[url][own_form]}a=do_view_course_12&id={$id}'; } }); }); }); //觀看日誌 $(document).on("click",".viewlog",function(){ var id = $(this).attr("lay-id"); var strs= new Array(); //定義一陣列 strs=id.split("-"); //字元分割 id0= strs[0]; id1= strs[1]; id2= strs[2]; layer.ready(function(){ layer.open({ type: 2, title: '觀看日誌', maxmin: true, shade: 0.6, area: ['90%', '95%'], content: '{$_M[url][own_form]}a=do_look_live_log&pid='+id0+'&cid='+id1+'&ccid='+id2, //content: id,//網址 end: function(){ //self.location='{$_M[url][own_form]}a=do_view_course_12&id={$id}'; } }); }); }); //觀看回放 $(document).on("click",".look_video",function(){ var id = $(this).attr("lay-id"); var strs= new Array(); //定義一陣列 strs=id.split("-"); //字元分割 id0= strs[0]; id1= strs[1]; id2= strs[2]; layer.ready(function(){ layer.open({ type: 2, title: '觀看回放', maxmin: true, shade: 0.6, area: ['90%', '95%'], content: '{$_M[url][own_form]}a=do_look_video&pid='+id0+'&cid='+id1+'&ccid='+id2, //content: id,//網址 end: function(){ //self.location='{$_M[url][own_form]}a=do_view_course_12&id={$id}'; } }); }); }); //上傳資料 $(document).on("click",".add_file",function(){ var id = $(this).attr("lay-id"); var strs= new Array(); //定義一陣列 strs=id.split("-"); //字元分割 id0= strs[0]; id1= strs[1]; id2= strs[2]; layer.ready(function(){ layer.open({ type: 2, title: '上傳資料', maxmin: true, shade: 0.6, area: ['90%', '95%'], content: '{$_M[url][own_form]}a=do_add_file&pid='+id0+'&ccid1='+id1+'&ccid2='+id2, }); }); }); //題庫 $(".view_examination").on("click",function(){ var id = $(this).attr("lay-id"); var strs= new Array(); //定義一陣列 strs=id.split("|"); //字元分割 id1= strs[0]; id2= strs[1] layer.ready(function(){ layer.open({ type: 2, title: '新增練習、考試、作業、考點等試卷', maxmin: true, shade: 0.6, area: ['80%', '90%'], content: '/admin/index.php?lang=cn&anyid=44&n=examination&c=examination&a=do_choice_test&eid_arr='+id2+'&id='+id1, end: function(){ // self.location='{$_M[url][own_form]}a=do_view_course_a&id0={$id0}&id1={$id1}&id2={$id2}&id3={$id3}&id4={$id4}'; } }); }); //layer.msg('{$dfs}'); }); {notempty name="$turnovertext"} layer.msg('{$turnovertext}'); {/notempty} }); </script> </div> </body> </html>
重點：
不要放到這裡：
