先贴上html文档
<div class='layui-form'> <div class="layui-form-item"> <div class="layui-inline"> <label class="layui-form-label">起始日期:</label> <input type="text" class="layui-input" id="startdatepicker" autocomplete="off" /> </div> <div class="layui-inline"> <label class="layui-form-label">截止日期:</label> <input type="text" class="layui-input" id="enddatepicker" autocomplete="off" /> </div> <button class="layui-btn" data-type="reload">搜索</button> </div> </div>
时间选择器
1 layui.use('laydate',function(){ 2 var laydate = layui.laydate; 3 4 laydate.render({ 5 elem:'#startdatepicker' 6 ,format:'yyyy-MM-dd' 7 ,done:function(value,date,startDate){ 8 //$scope.querySearchParams.startdatepicker = stitchingDate(value,'startdatepicker'); 9 } 10 }); 11 12 var enddatepicker=laydate.render({ 13 elem:'#enddatepicker' 14 ,format:'yyyy-MM-dd' 15 ,done:function(value,date,startDate){ 16 //$scope.querySearchParams.startdatepicker = stitchingDate(value,'startdatepicker'); 17 } 18 }); 19 });
获取日期,并重载
1 1 var $ = layui.$, active = { 2 2 reload : function() { 3 3 var startdate = $("#startdatepicker"); 4 4 var enddate = $("#enddatepicker"); 5 5 6 6 //执行重载 7 7 table.reload('tests', { 8 8 where : { 9 9 start : startdate.val(), 10 10 end : enddate.val() 11 11 } 12 12 }); 13 13 } 14 14 }; 15 15 $('.layui-btn').on('click', function() { 16 16 var type = $(this).data('type'); 17 17 active[type] ? active[type].call(this) : ''; 18 18 });