使用layui日期控件laydate对开始和结束时间进行联动控制的方法
作者:键盘侠时间:2026-10-23 10:56:22浏览:410
本文介绍如何在HTML页面中引入laydate.js,并通过配置开始时间控件的done回调函数,动态生成结束时间输入框。利用AJAX获取后端返回的最大最小时间范围,传递给laydate.render方法,从而实现开始与结束时间的联动限制。
引入laydate控件
首先,在页面中引入laydate.js文件。
HTML页面控件定义
接着,在HTML页面中定义相关的控件元素。
<input name="begin_time" style="margin-top:8px;width:130px;" id="begin_time" value="${beginTime}" class="Wdate" type="text"/>
<input name="deadline_time" style="margin-top:8px;width:130px;" id="deadline_time" value="${deadlineTime}" class="Wdate" type="text"/>
JavaScript联动逻辑实现
然后,编写HTML页面所需的JavaScript代码以实现逻辑控制。
//年月选择器
laydate.render({
elem: '#begin_time'
,type: 'month'
,min: '${minBeginTime}-29'
,max: '${maxBeginTime}-29'
,done: function(value){
$("#deadline_time").remove();
$("#myd").append('<input name="deadline_time" style="margin-top:8px;width:130px;" id="deadline_time" class="Wdate" type="text"/>');
$("#deadline_time").val(value);
$.ajax({
url:'reportYearMonth/getMaxMinEndTime.json',
data:{minTime:value},
type:'post',
dataType:'json',
success:function(data){
laydate.render({
elem: '#deadline_time'
,type: 'month'
,min:data.minEndTime+'-29'
,max:data.maxEndTime+'-29'
});
}
});
}
});
以上介绍了使用layui日期控件laydate对开始和结束时间进行联动控制的方法,供读者参考。
作者最新文章
免登录快速分享代码:适合面试协作的轻量级JS在线运行工具推荐
2026-11-05 14:45:59
JS空字符串和纯空格转浮点数的结果是什么
2026-11-05 11:04:42
JS在线格式化缩进混乱怎么办?配置项调整技巧
2026-11-04 23:27:25
JS怎么获取秒级时间戳
2026-11-03 21:45:29
JS时间戳怎么从毫秒转换为秒
2026-11-03 20:04:14
