设为首页 加入收藏

TOP

layui时间控件联动:开始时间、结束时间,有效时间范围(一)
2019-09-17 19:10:17 】 浏览:76
Tags: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.getMinu
首页 上一页 1 2 下一页 尾页 1/2/2
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇js上传图片 下一篇关于Webpack的的认识及教学基础

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目