开发页面中有多个地方需要选择日期，所以选择了layui的 laydate控件，但是在点击第二个“日期选择框”时，生成的选择框只是显示一下就消失了，参考网上的资料，是由于我们点击了“日期选择框”后 ，laydate会给input框增加一个 lay-key=”1”，找到了如下的解决方法：通过类选择“日期选择框”，遍历循环创建实例。
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>Title</title>
-
<script type="text/javascript" src="../public/3rdLibs/jquery/v3.2.1/jquery-3.2.1.min.js"></script>
-
<script type="text/javascript" src="../public/3rdLibs/laydate/v5.0.9/laydate/laydate.js"></script>
-
</head>
-
<body>
-
<div class="">
-
上课日期：
-
<input type="text" class="J-startTime" value="" placeholder="请选择开始日期" readonly="readonly">
-
<span class="from-to"> - </span>
-
<input type="text" class="J-endTime" value="" placeholder="请选择结束日期" readonly="readonly">
-
</div>
-
<div class="">
-
考试日期：
-
<input type="text" class="J-startTime" value="" placeholder="请选择开始日期" readonly="readonly">
-
<span class="from-to"> - </span>
-
<input type="text" class="J-endTime" value="" placeholder="请选择结束日期" readonly="readonly">
-
</div>
-
<script>
-
$(function () {
-
//点击“开始日期”弹出日期选择框，选择日期后，结束日期默认等于开始日期，且结束日期最小值为对应的开始日期
-
//遍历循环创建实例
-
var endDate=[];
-
$('.J-startTime').each(function(index){
-
var _this=this;
-
laydate.render({
-
elem: _this,
-
trigger:'click',
-
done: function(value, date){
-
$(_this).nextAll('.J-endTime').val(value);
-
endDate[index].config.min ={
-
year:date.year,
-
month:date.month-1, //关键
-
date: date.date,
-
};
-
}
-
});
-
});
-
$('.J-endTime').each(function (index) {
-
var _this=this;
-
endDate[index]=laydate.render({
-
elem:_this,
-
});
-
});
-
});
-
</script>
-
</body>
-
</html>
通过数组endDate存储“开始日期”对应的“结束日期”，动态设置“结束日期”的最小值。
注意：
1、endDate[index].config.min是一个对象，必须分别设置：年、月、日；
2、date中的月从1开始，而endDate[index].config.min中的月从0开始，所以需在date.month-1基础上赋值。