本文介绍如何在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对开始和结束时间进行联动控制的方法，供读者参考。