layui时间日期控件【设置默认值，结束时间大于开始时间】--精确到秒(可自己设置)

layui时间日期控件【设置默认值，结束时间大于开始时间】–精确到秒(可自己设置)

1.页面代码

<div class="layui-inline">
<!-- <label class="layui-form-label">开始时间</label>--><div class="layui-input-inline"><input type="text" id="s_startTime" name="s_startTime" placeholder="开始时间" lay-verify='datetime' class="layui-input"/></div>
</div>
<div class="layui-inline">
<!-- <label class="layui-form-label">结束时间</label>--><div class="layui-input-inline"><input type="text" id="s_endTime" name="s_endTime" placeholder="结束时间" lay-verify='datetime' class="layui-input"/></div></div>

2.js引入

layui.use(['layer','laydate'], function() {var layer = layui.layer,$ = layui.jquery,laydate = layui.laydate;// 时间选择器初始化 开始时间var start = laydate.render({elem: '#s_startTime',max:1,//最大值为当前日期trigger: 'click',type: 'datetime',//日期时间选择器value: getRecentDay(-3),//默认值30天前done:function(value,date){if(value && (value>$("#s_endTime").val())){/*开始时间大于结束时间时，清空结束时间*/$("#s_endTime").val("");}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: '#s_endTime',max : 1,//最大值为当前日期type: 'datetime',//日期时间选择器value: getRecentDay(-0),//默认值昨天done:function(value,date){start.config.max={year:date.year,month:date.month-1,date: date.date,hours:date.hours,//可注释minutes:date.minutes,//可注释seconds:date.seconds//可注释}}});
});/**获取近N天*/
function getRecentDay(day){var today = new Date();var targetday_milliseconds=today.getTime() + 1000*60*60*24*day;today.setTime(targetday_milliseconds);var tYear = today.getFullYear();var tMonth = today.getMonth();var tDate = today.getDate();var tHours = today.getHours();//可注释var tMinutes = today.getMinutes();//可注释var tSeconds = today.getSeconds();//可注释tMonth = doHandleMonth(tMonth + 1);tDate = doHandleMonth(tDate);return tYear+"-"+tMonth+"-"+tDate+" "+tHours+":"+tMinutes+":"+tSeconds;
}
/**获取近N月*/
function doHandleMonth(month){var m = month;if(month.toString().length == 1){m = "0" + month;}return m;
}

3.页面效果图

4.type - 控件选择类型

5.format - 自定义格式

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！