laydate时间控件：开始时间，结束时间最大最小值，设置默认时分秒

首先我们有开始时间和结束时间：

<div class="col-sm-6"><div class="form-group"><label class="col-sm-4 control-label"><@ctx.i18n text = "开始时间"/><font color="red">*</font>：</label><div class="col-sm-8"><div class="input-group date"><span class="input-group-addon"><i class="fa fa-calendar"></i></span><input class="form-control time-input" autocomplete="off" name="startTime" id="startTime" data-type="datetime"data-format="yyyy-MM-dd HH:mm:ss" type="text"/></div></div></div></div>

<div class="col-sm-6"><div class="form-group"><label class="col-sm-4 control-label"><@ctx.i18n text = "结束时间"/><font color="red">*</font>：</label><div class="col-sm-8"><div class="input-group date"><span class="input-group-addon"><i class="fa fa-calendar"></i></span><input class="form-control time-input" autocomplete="off" name="endTime" id="endTime" data-type="datetime"data-format="yyyy-MM-dd HH:mm:ss" type="text" data-callback="chgCallback"/></div></div></div></div>

上面的两段代码是我直接从项目里面拿出来的，其实这样写开始时间和结束时间已经完全可以实现了，因为属性写的比较全，下面是这两段代码所实现的功能：

我们可以看到，当我们选择时间时，默认高亮今天日期，点击‘选择时间’，可以选择时分秒，这些是最基础的实现，就不赘叙了！

好的，现在回归正题，我想要在选择开始时间时，点击 ' 选择时间 ' 时，默认高亮的时间点是早上八点（因为此时是默认停留在00:00:00），并且我想要选完开始时间之后，再选择结束时间时，实现小于开始时间的结束时间不可选，也就是说，我想要实现开始时间选好后，重置结束时间的最小值，那么看代码：

 layui.use('laydate', function() {var laydate = layui.laydate;var start = laydate.render({elem: '#startTime',type:'datetime',ready: function(date){//设置默认值,选择日期不选择时分秒时的默认值this.dateTime.hours=08;this.dateTime.minutes=00;this.dateTime.seconds=00;}, done : function(value, date, endDate) {end.config.min = {year : date.year,month : date.month - 1,date : date.date,hours : date.hours,minutes : date.minutes,seconds : date.seconds}; //开始日选好后，重置结束日的最小日期}})var end = laydate.render({elem: '#endTime', type: 'datetime'});})

上面的代码可实现选择好开始时间之后，再选择结束时间时，小于开始时间的时间不可选的功能，那么我们再延伸一下，如果此时我们再选择开始时间时，想要实现大于结束时间的时间不可选怎么办呢，那就加一行代码：

, done: function (value, date, endDate) {start.config.max = {year: date.year,month: date.month - 1,date: date.date,hours: date.hours,minutes: date.minutes,seconds: date.seconds}; //结束日选好后，重置开始日的最大日期}

这段代码就是实现选择好结束时间时，再去选择开始时间，开始时间大于结束时间的日期时间不可选，那么我再把完整的实现代码粘一下：

layui.use('laydate', function() {var laydate = layui.laydate;var start = laydate.render({elem: '#startTime',type:'datetime',ready: function(date){//设置默认值,选择日期不选择时分秒时的默认值this.dateTime.hours=08;this.dateTime.minutes=00;this.dateTime.seconds=00;}, done : function(value, date, endDate) {end.config.min = {year : date.year,month : date.month - 1,date : date.date,hours : date.hours,minutes : date.minutes,seconds : date.seconds}; //开始日选好后，重置结束日的最小日期}})var end = laydate.render({elem: '#endTime', type: 'datetime', done: function (value, date, endDate) {start.config.max = {year: date.year,month: date.month - 1,date: date.date,hours: date.hours,minutes: date.minutes,seconds: date.seconds}; //结束日选好后，重置开始日的最大日期}});})

上面的代码就是实现：当我们选择好开始时间时，重置结束时间的最小日期，小于开始时间的结束时间便不可选了！当我们有了结束时间，再去选择开始时间时，重置开始时间的最大日期，大于结束时间的开始时间便不可选了！

那么我们再去页面看一下效果：当我们开始时间选择的是2002-6-17 08:15时，结束日期小于这个时间的便不可选：

反之亦然，另外简单说一下，datetime的类型是年月日时分秒这个大家都知道，虽然我已经在上面那个div里面写上了 ' data-type="datetime" '，这句代码肯定是生效的，但是当我们在下面引用的时候，" type: 'datetime' ",这个类型还是要再写一下的

以上就是今天所分享的内容了，有需要的可以根据自己的代码适当的增减，我写的比较详细，不难看明白！

laydate时间控件：开始时间，结束时间最大最小值，设置默认时分秒相关推荐

html中radio单选按钮控件标签用法解析及如何设置默认选中
Radio 对象代表 HTML 表单中的单选按钮.在 HTML 表单中 <input type="radio"> 每出现一次,一个 Radio 对象就会被创建.单选按钮 ...
input 起止时间_给表单验证控件添加结束时间不得小于开始时间的验证方法
//引入验证控件JS function getDate(strDate) { var date = eval('new Date(' + strDate.replace(/\d+(?=-[^-]+$) ...
【小5聊】layui基础之时间控件开始时间和结束时间的控制，结束时间不能小于开始时间，开始时间不能大于结束时间
1.结束时间不能小于开始时间,开始时间不能大于结束时间 <div class="commonTimeDiv"></div> <div class=&q ...
WINFORM时间控件（DATATIMEPICKER）的显示格式设置
将DateTimePicker控件拖出来后打开属性,找到Format属性,选择Costum选项: 然后找到CustomFormat属性,按照你要显示的格式来输入,示例如下: 若系统时间为:2016年1 ...
iOS 使用UI控件的外观协议UIAppearance进行设置默认UI控件样式
在iOS开发中,经常会对UINavigationBar的样式进行全局样式.采用的设置方式有两种: 第一种,采用方式如下: [UINavigationBar appearance] 这种是对一类对象的默 ...
前端radio单选框默认选中_html中radio单选按钮控件标签用法解析及如何设置默认选中...
Radio 对象代表 HTML 表单中的单选按钮.在 HTML 表单中每出现一次,一个 Radio 对象就会被创建. 单选按钮是表示一组互斥选项按钮中的一个.当一个按钮被选中,之前选中的按钮就变为非 ...
android 时间控件使用,android 时间控件的使用
一.样式文件time.xml android:orientation="vertical" android:layout_width="match_parent" ...
EasyUI年-月日期格式的日期时间控件+行内编辑的年-月日期格式的日期时间控件
一.input标签下的easyui-datebox的年月时间格式 1.标签代码 <label style="font-size: 14px;font-family: Microsoft ...
python日历gui_python GUI库图形界面开发之PyQt5日期时间控件QDateTimeEdit详细使用方法与实例...
PyQt5日期时间控件QDateTimeEdit介绍 QDateTimeEdit是一个允许用户编辑日期时间的控件,可以使用键盘上的上下键头按钮来增加或减少日期的时间值,QDateTimeEdit通过s ...
给echarts添加筛选时间控件时，控件不显示，并设置数据库无数据时echarts模块显示暂无数据
给echarts模块添加时间控件时,控件无效,经检查发现,控件被画布遮盖了,需要用一个form标签包括时间控件,否则时间控件不生效.另外,如果echarts从后台获取到的数据为空,需要提示暂无信息.这 ...

laydate时间控件：开始时间，结束时间最大最小值，设置默认时分秒

laydate时间控件：开始时间，结束时间最大最小值，设置默认时分秒相关推荐

最新文章

热门文章