实际开发中,经常遇到时间控件联动的情况,然后每次都网上搜代码Copy,不过每次都有点小Bug让你错不及防;
这次,在这里备份一下,以后Copy自己的得了(欢迎Copy代码,若遇到问题,请麻烦回复我一下,云测试Bug,hhh):

1 @Styles.Render("~/Content/layuiadmin/layui/css/layui.css") 2 @Styles.Render("~/Content/layuiadmin/style/admin.css?v=1") 3 @Scripts.Render("~/Plugins/json3.min.js") 4 @Scripts.Render("~/Scripts/jquery-1.10.2.min.js") 5 @Scripts.Render("~/Content/layuiadmin/layui/layui.js") 6 7 <div class="layui-fluid layui-form"> 8 <div class="layui-card"> 9 <div class="layui-card-body"> 10 <div class="layui-form-item"> 11 12 <div class="layui-inline"> 13 <label class="layui-form-label">开始时间:</label> 14 <div class="layui-input-inline"> 15 <input type="text" name="beginDate" id="beginDate" autocomplete="off" class="layui-input laydate" placeholder="年-月-日"> 16 </div> 17 </div> 18 19 <div class="layui-inline"> 20 <label class="layui-form-label">结束时间:</label> 21 <div class="layui-input-inline"> 22 <input type="text" name="endDate" id="endDate" autocomplete="off" class="layui-input laydate" placeholder="年-月-日"> 23 </div> 24 </div> 25 26 </div> 27 </div> 28 </div> 29 </div> 30 31 <input type="hidden" id="hidMinListDate" value="1998-01-01" /> 32 <input type="hidden" id="hidMaxListDate" value="@DateTime.Now.ToString("yyyy-MM-dd")" />
1 layui.use('laydate', function () { 2 var laydate = layui.laydate; 3 var minListDate = $('#hidMinListDate').val();//最小可选时间,例:1990-02-01 4 var maxListDate = $('#hidMaxListDate').val();//最大可选时间,例:2200-12-31 5 var begin = "#beginDate", end = "#endDate";//开始时间选择框、结束时间选择框:文本框 6 var endChange = function (val, date) { 7 if (date && date.year) 8 begindate.config.max = { 9 year: date.year, 10 month: date.month - 1,//必须减1才是正确值 11 date: date.date, 12 hours: date.hours, 13 minutes: date.minutes, 14 seconds: date.seconds 15 }; 16 else { 17 var dateInit = new Date(maxListDate.replace(/-/g, "/")); 18 begindate.config.max = { 19 year: dateInit.getFullYear(), 20 month: dateInit.getMonth(), 21 date: dateInit.getDate(), 22 hours: dateInit.getHours(), 23 minutes: dateInit.getMinutes(), 24 seconds: dateInit.getSeconds() 25 }; 26 } 27 }; 28 var beginChange = function (val, date) { 29 if (date && date.year) 30 enddate.config.min = { 31 year: date.year, 32 month: date.month - 1, 33 date: date.date, 34 hours: date.hours, 35 minutes: date.minutes, 36 seconds: date.seconds 37 }; 38 else { 39 var dateInit = new Date(minListDate.replace(/-/g, "/")); 40 enddate.config.min = { 41 year: dateInit.getFullYear(), 42 month: dateInit.getMonth(), 43 date: dateInit.getDate(), 44 hours: dateInit.getHours(), 45 minutes: dateInit.getMinutes(), 46 seconds: dateInit.getSeconds() 47 }; 48 } 49 }; 50 var enddate = laydate.render({ 51 elem: end, 52 format: 'yyyy-MM-dd', 53 min: minListDate, 54 max: maxListDate, 55 done: endChange 56 }); 57 var begindate = laydate.render({ 58 elem: begin, 59 format: 'yyyy-MM-dd', 60 min: minListDate, 61 max: maxListDate, 62 done: beginChange 63 }); 64 });