layui时间控件联动：开始时间、结束时间，有效时间范围_JavaScript

layui时间控件联动：开始时间、结束时间，有效时间范围

实际开发中，经常遇到时间控件联动的情况，然后每次都网上搜代码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 });