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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM