欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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 });

上一篇:

下一篇: