Laydate控件设置初始与结束时间限制

1、实现功能要求：

当选择了开始时间后，结束时间必须大于等于开始时间，当选择了结束时间，开始时间必须小于等于结束时间

2、效果如图：

3、代码实现

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>table 动态添加行</title><link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css"/>
</head>
<body>
<div id="kPage" class="layui-fluid" style="padding: 0"><div class="layui-row"><div class="layui-card"><div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label">开始日期：</label><div class="layui-input-inline"><input name="start_date" id="start_date" class="layui-input" type="text" autocomplete="off"/>&emsp;</div><label class="layui-form-label">结束日期：</label><div class="layui-input-inline"><input name="end_date" id="end_date" class="layui-input" type="text" autocomplete="off"/>&emsp;</div></div></div></div></div>
</div>
<script src="https://www.layuicdn.com/layui/layui.js"></script>
<script type="text/javascript">layui.use(["table", "laydate", "layer"], function () {var laydate = layui.laydate;//设置开始时间var startDate = laydate.render({elem: '#start_date',//开始时间选择控件idmin: '2018-6-1',type: 'datetime',format: 'yyyy-MM-dd HH:mm', //可任意组合done: function (value, date) {if (value !== '') {endDate.config.min.year = date.year;endDate.config.min.month = date.month - 1;endDate.config.min.date = date.date;endDate.config.min.hours = date.hours;endDate.config.min.minutes = date.minutes;} else {endDate.config.min.year = '';endDate.config.min.month = '';endDate.config.min.date = '';endDate.config.min.hours = '';endDate.config.min.minutes = '';}}});//设置结束时间var endDate = laydate.render({elem: '#end_date',//结束时间选择控件idtype: 'datetime',format: 'yyyy-MM-dd HH:mm', //可任意组合done: function (value, date) {if (value !== '') {startDate.config.max.year = date.year;startDate.config.max.month = date.month - 1;startDate.config.max.date = date.date;startDate.config.max.hours = date.date;startDate.config.max.minutes = date.date;} else {startDate.config.max.year = '';startDate.config.max.month = '';startDate.config.max.date = '';startDate.config.max.hours = '';startDate.config.max.minutes = '';}}});})
</script>
</body>
</html>

Laydate控件设置初始与结束时间限制相关推荐

《LabVIEW 虚拟仪器程序设计从入门到精通（第二版）》一2.3　控件设置
本节书摘来自异步社区<LabVIEW 虚拟仪器程序设计从入门到精通(第二版)>一书中的第2章,第2.3节,作者林静 , 林振宇 , 郑福仁,更多章节内容可以访问云栖社区"异步社 ...
jqGrid中时间控件input的值赋给点开后的laydate控件
可以看到上课时间的值是8点-10点点击时间控件选择时间时,时间控件不会根据已有的时间数据显示默认值,而是显示当前时间? Q:为什么会显示当前时间,怎么解决这个问题? A: 代码如下: getTime ...
viewstate 解码 php,.NET_asp.net中ViewState的用法详解，在web窗体控件设置为runat = serv - phpStudy...
asp.net中ViewState的用法详解在web窗体控件设置为runat = "server",这个控件会被附加一个隐藏的属性_ViewState,_ViewState存放了 ...
206_QT_功能实现代码、界面控件操作代码分开实现，很不错【采用了Q_CLASSINFO、Q_PROPERTY、setProperty对控件设置属性、qobject_cast】
动图: setProperty对控件设置属性,用于判断是哪一个控件,很巧妙使用qobject_cast,对类指针进行下行转换,也很不错 qperson.h–年龄增加功能实现 #ifndef QPER ...
Qt 控件设置透明和半透明方法汇总
遇到了好多次控件有需要设置为透明和半透明的情况,每次都是去网上搜一搜,看看别人怎么实现的,浪费了很多时间,故在这里进行一个总结,希望对自己有一个提升. 本文对透明的各种情况进行了分类: 整个窗口及窗口 ...
Android --- BaseQuickAdapter 子控件设置了addOnClickListener(R.id.xxx)；点击的时候还是没反应
正常情况下对控件进行以下操作 helper.addOnClickListener(R.id.rl_feedback); 然后再对控件设置监听事件 // 点击事件myFeedBackAdapter.s ...
IE8允许ActiveX控件设置
IE8允许ActiveX控件设置在IE浏览器菜单栏,找到"Internet选项",--->"安全"--->"Internet" ...
C#为窗体控件设置透明色问题
最近在做c#的小游戏开发(练手),碰到了为c#窗体中各个控件设置透明色的问题,这里记下来供碰到同样问题的朋友们参考,也供自己记忆. 一.为PictureBox设置透明色: 首先我们创建一个新的窗体项目 ...
winform chart控件设置
winform chart控件设置//seriesX.MarkerColor = Color.Green;//设置点的大小//seriesX.MarkerSize = 5;//seriesX.Mark ...

Laydate控件设置初始与结束时间限制

1、实现功能要求：

2、效果如图：

3、代码实现

Laydate控件设置初始与结束时间限制相关推荐

最新文章

热门文章