有這樣一種需求，選擇[開始時間]和[結束時間]，接待時間自動設置起始時間和終止時間。
使用的日曆控件是WeUI官方的Calendar。
<!--出差時間-->
<div class="weui-cell">
<div class="weui-cell__hd"><label class="weui-label">出差時間</label></div>
<div class="weui-cell__bd">
<div class="weui-flex">
<input id="start_datetime" name="start_datetime" class="weui-input" type="text"
placeholder="開始時間" readonly="readonly">
<span><img src="res/img/right-arrow.png" style="width: 24px;height: 24px"></span>
<input id="end_datetime" name="end_datetime" class="weui-input" type="text"
placeholder="結束時間" style="text-align: right;" readonly="readonly">
</div>
</div>
</div>
<!-- 接待時間 -->
<div class="weui-cell">
<div class="weui-cell__hd"><label for="reception_datetime" class="weui-label">接待時間</label>
</div>
<div class="weui-cell__bd">
<input id="reception_datetime" name="reception_datetime" class="weui-input" type="text"
placeholder="請選擇接待時間" readonly="readonly">
</div>
</div>
實現思路如下：
點擊接待時間的時候觸發click事件，首先需要驗證開始時間和結束時間是否填寫正確。
如果正確，初始化接待時間的calendar。
當開始時間和結束時間發生變化的時候，需要先銷燬接待時間的calendar，再重新初始化。
銷燬的時候需要注意，如果當前沒有calendar初始化的實例，直接銷燬是會報錯的，所以這裏設置了一個標誌來保存當前接待時間calendar的初始化狀態。
let isInitCalener = true; //未初始化
完整代碼
<head></head>
<head>
<!--控制頁面自動適應屏幕大小-->
<meta charset="UTF-8" name="viewport"
content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>BORN TO LOVE</title>
<link rel="shortcut icon" href="#">
<!--JQuery-->
<script type="text/javascript" charset="UTF-8" src="res/scripts/jquery-3.3.1.min.js"></script>
<!--JQuery WEUI-->
<script type="text/javascript" charset="UTF-8" src="res/scripts/jquery-weui.min.js"></script>
<script type="text/javascript" charset="UTF-8" src="res/scripts/fastclick.js"></script>
<!--WeUI CSS-->
<link rel="stylesheet" type="text/css" href="res/css/weui.css">
<link rel="stylesheet" type="text/css" href="res/css/jquery-weui.css">
<!--鏈接外部樣式表-->
<%-- <link rel="stylesheet" type="text/css" href="res/css/mystyle_registration.css">--%>
</head>
<body></body>
<!--出差時間-->
<div class="weui-cell">
<div class="weui-cell__hd"><label class="weui-label">出差時間</label></div>
<div class="weui-cell__bd">
<div class="weui-flex">
<input id="start_datetime" name="start_datetime" class="weui-input" type="text"
placeholder="開始時間" readonly="readonly">
<span><img src="res/img/right-arrow.png" style="width: 24px;height: 24px"></span>
<input id="end_datetime" name="end_datetime" class="weui-input" type="text"
placeholder="結束時間" style="text-align: right;" readonly="readonly">
</div>
</div>
</div>
<!-- 接待時間 -->
<div class="weui-cell">
<div class="weui-cell__hd"><label for="reception_datetime" class="weui-label">接待時間</label>
</div>
<div class="weui-cell__bd">
<input id="reception_datetime" name="reception_datetime" class="weui-input" type="text"
placeholder="請選擇接待時間" readonly="readonly">
</div>
</div>
<script></script>
<script type="text/javascript">
// ---- 格式化日期 yyyy-mm-dd ----
function formatDate(date) {
const y = date.getFullYear();
let m = date.getMonth() + 1;
m = m < 10 ? '0' + m : m;
let d = date.getDate();
d = d < 10 ? ('0' + d) : d;
return y + '-' + m + '-' + d;
}
// -初始化-[開始時間]+[結束時間]
$("#start_datetime").calendar({
minDate: ['2019-12-31'], //設置最小可選日期
maxDate: [formatDate(new Date())], //設置今天日期爲可選最大日期
dateFormat: 'yyyy-mm-dd', //設置日期格式
onChange: function (p, values, displayValues) {
if (!isInitCalener) { // 已經初始化了 - false-> !-false=ture
$("#reception_datetime").calendar("destroy"); //每次點擊先銷燬
isInitCalener = true; //需要初始化
console.log("reception_datetime 被銷燬了！ isInitCalener = true;");
}
}
});
$("#end_datetime").calendar({
minDate: ['2019-12-31'], //設置最小可選日期
// maxDate: ['2021','01','01'],
maxDate: [formatDate(new Date())], //設置今天日期爲可選最大日期
dateFormat: 'yyyy-mm-dd', //設置日期格式
onChange: function (p, values, displayValues) {
if (!isInitCalener) { // 已經初始化了 - false-> !-false=ture
$("#reception_datetime").calendar("destroy"); //每次點擊先銷燬
isInitCalener = true; //需要初始化
console.log("reception_datetime 被銷燬了！ isInitCalener = true;");
}
}
});
// - 3 - 接待詳情 ---------------------------------
// 接待日期控件初始化
let isInitCalener = true; //未初始化
$("#reception_datetime").click(function () {
const start = $("#start_datetime").val();
const end = $("#end_datetime").val();
if (start === "" || end === "") {
$.toptip("請輸入開始時間和結束時間！", "warning");
} else if (start > end) {
$.toptip("開始時間必須小於結束時間！", "warning");
}
// 如果沒有初始化，就初始化一個calendar
else if (isInitCalener) {
console.log("------------初始化Calendar--------------")
const startDate = new Date(start);
// alert("startDate " + startDate);
const preDate = new Date(startDate.getTime() - 24 * 60 * 60 * 1000); //前一天
// alert("preDate: " + preDate);
const preDate_format = formatDate(preDate);
// alert("preDate_format: " + preDate_format);
$("#reception_datetime").calendar({ //重新初始化
minDate: [preDate_format], //設置最小可選日期 注意是可選日期的【前一天】
maxDate: [end], //設置今天日期爲可選最大日期
value: [start], //設置默認選中日期
dateFormat: 'yyyy-mm-dd' //設置日期格式
});
$("#reception_datetime").calendar("open"); //打開彈窗
isInitCalener = false;
console.log("reception_datetime 重新建立了！ isInitCalener = true;");
}
});
</script>
日曆控件初始化的時候，設置minDate是可選日期的前一天。
const curDate = new Date();
const preDate = new Date(curDate.getTime() - 24*60*60*1000); //前一天
const nextDate = new Date(curDate.getTime() + 24*60*60*1000); //後一天
演示效果：
