實際開發中,經常遇到時間控件聯動的情況,然后每次都網上搜代碼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 });