datetimepicker實現時間選擇的相互制約
阿新 • • 發佈：2019-02-16
datetimepicker是一款時間選擇控制元件，有時我們會用兩個控制元件選擇開始時間和結束時間，要求開始時間不能晚於結束時間，html實現程式碼如下：
<html>
<head>
<meta charset="UTF-8">
<title>dateTimePicker</title>
<link type="text/css" rel="stylesheet" href="css/skin.css"></link>
<link rel="stylesheet" type="text/css" href="css/bootstrap-datetimepicker.min.css">
<script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="js/bootstrap-datetimepicker-master/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
</head>
<body>
<div style="width:300px" class="input-group"><!-- 開始時間 -->
<span class="input-group-addon prev">開始時間</span>
<input type="text" class="form-control content cursor-pointer" id="startTime" readonly s>
</div>
<div style="width:300px" class="input-group"><!-- 結束時間 -->
<span class="input-group-addon prev">結束時間</span>
<input type="text" class="form-control content cursor-pointer" id="endTime" readonly >
</div>
</body>
<script type="text/javascript">
$("#startTime").datetimepicker({
format: 'yyyy-mm-dd hh:ii:ss',
minuteStep:1,
minView:'hour',
language: 'zh-CN',
pickerPosition:'bottom-right',
autoclose:true,
}).on("click",function(){
$("#startTime").datetimepicker("setEndDate",$("#endTime").val());
});
$("#endTime").datetimepicker({
format: 'yyyy-mm-dd hh:ii:ss',
minuteStep:1,
minView:'hour',
language: 'zh-CN',
autoclose:true,
}).on("click",function(){
$("#endTime").datetimepicker("setStartDate",$("#startTime").val());
});
$(document).on("click","#endTime",function(){
$('#endTime').datetimepicker('show');
});
$(document).on("click","#startTime",function(){
$('#startTime').datetimepicker('show');
});
</script>
</html>