layui时间控件联动:开始时间、结束时间,有效时间范围
程序员文章站
2024-01-01 10:29:10
实际开发中,经常遇到时间控件联动的情况,然后每次都网上搜代码Copy,不过每次都有点小Bug让你错不及防; 这次,在这里备份一下,以后Copy自己的得了(欢迎Copy代码,若遇到问题,请麻烦回复我一下,云测试Bug,hhh): 1 @Styles.Render("~/Content/layuiadm ......
实际开发中,经常遇到时间控件联动的情况,然后每次都网上搜代码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 });
推荐阅读
-
layui时间控件联动:开始时间、结束时间,有效时间范围
-
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
-
Android 自定义日期段选择控件功能(开始时间-结束时间)
-
laydate如何根据开始时间或者结束时间限制范围
-
layui 日期框开始日期和结束日期不能超过当前时间 并且开始时间不能超结束时间
-
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
-
Android 自定义日期段选择控件功能(开始时间-结束时间)
-
php获取指定时间范围内所有的月开始到结束
-
laydate如何根据开始时间或者结束时间限制范围
-
LayUI中的时间日期控件,设置时间范围,过去的时间不能选择,只能选择未来的时间