有这样一种需求,选择[开始时间]和[结束时间],接待时间自动设置起始时间和终止时间。
使用的日历控件是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); //后一天
演示效果: