開發頁面中有多個地方需要選擇日期，所以選擇了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基礎上賦值。