1.写好时间选择弹框样式，包含取消与确认按钮样式！
2.再遍历时间小时li时，点击li获取该元素的值并赋值给新建的div中进行保存。小时<10，前面添加0，分钟也如此！
3.设置input默认开始时间00:00
4.点击确认时，当开始时间小于结束时间时，将新建的div中的小时与分钟赋值给input，我这里是将小时*60+分钟来比较大小的。如不符合要求则alert提示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
#inputTime, #inputEndTime {
border-radius: 4px;
border: 1px solid #dcdfe6;
color: #606266;
font-size: inherit;
height: 40px;
line-height: 40px;
outline: none;
padding: 0 15px;
width: 110px;
}
#timeSelect, #endTimeSelect {
width: 120px;
height: 226px;
overflow: hidden;
position: absolute;
top: 50px;
border: 1px solid #e4e7ed;
background-color: #fff;
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
border-radius: 2px;
}
#endTimeSelect {
left: 159px;
}
#hour, #endHour {
width: 60px;
height: 188px;
float: left;
overflow: auto;
}
#minute, #endMinute {
width: 60px;
height: 188px;
overflow: auto;
}
#timeSelect li, #endTimeSelect li {
list-style: none;
font-size: 12px;
color: #606266;
height: 32px;
line-height: 32px;
text-align: center;
cursor: pointer;
}
#timeSelect li.active, #endTimeSelect li.active {
color: #000;
font-weight: bold;
background: #ccc;
}
#confirm, #endConfirm{
border-top: 1px solid #e4e4e4;
padding: 4px;
height: 36px;
line-height: 25px;
text-align: right;
}
#confirm button, #endConfirm button {
border: none;
line-height: 28px;
padding: 0 5px;
margin: 0 5px;
cursor: pointer;
background-color: transparent;
outline: none;
font-size: 12px;
color: #303133;
}
#confirm #ensure, #endConfirm #endEnsure {
font-weight: 800;
color: #409eff;
}
</style>
</head>
<body>
<!-- 设置input开始时间显示格式 -->
<div style="display: none;">
<span id="inputHour"></span>
<span>:</span>
<span id="inputMinute"></span>
</div>
<!-- 设置input结束时间显示格式 -->
<div style="display: none;">
<span id="inputEndHour"></span>
<span>:</span>
<span id="inputEndMinute"></span>
</div>
<input id="inputTime" type="text" placeholder="请选择" onclick="showTime()">
<span>-</span>
<input id="inputEndTime" type="text" placeholder="请选择" onclick="showEndTime()">
<!-- 开始时间选择div -->
<div id="timeSelect" style="display: none;">
<div id="hour">
</div>
<div id="minute">
</div>
<div id="confirm">
<button onclick="closeTime()">取消</button>
<button id="ensure">确定</button>
</div>
</div>
<!-- 结束时间选择div -->
<div id="endTimeSelect" style="display: none;">
<div id="endHour">
</div>
<div id="endMinute">
</div>
<div id="endConfirm">
<button onclick="closeEndTime()">取消</button>
<button id="endEnsure">确定</button>
</div>
</div>
<script>
// input默认开始时间00:00
var inputHour = document.getElementById('inputHour');
if(inputHour.innerText == '') {
inputHour.innerText = '00';
}
var inputMinute = document.getElementById('inputMinute');
if(inputMinute.innerText == '') {
inputMinute.innerText = '00';
}
// input默认结束时间00:00
var inputEndHour = document.getElementById('inputEndHour');
if(inputEndHour.innerText == '') {
inputEndHour.innerText = '00';
}
var inputEndMinute = document.getElementById('inputEndMinute');
if(inputEndMinute.innerText == '') {
inputEndMinute.innerText = '00';
}
// 选择开始时间小时
var ulHour = document.createElement("ul");
$("#timeSelect #hour").append(ulHour);
for(var i = 0; i < 24; i++) {
if(i < 10) {
i = '0' + i;
}
var li = document.createElement("li");
li.innerText = i;
ulHour.appendChild(li);
}
// 选择结束时间小时
var ulEndHour = document.createElement("ul");
$("#endTimeSelect #endHour").append(ulEndHour);
for(var i = 0; i < 24; i++) {
if(i < 10) {
i = '0' + i;
}
var li = document.createElement("li");
li.innerText = i;
ulEndHour.appendChild(li);
}
// 选择开始时间分钟
var ulMinute = document.createElement("ul");
$("#timeSelect #minute").append(ulMinute);
for(var i = 0; i < 60; i++) {
if(i < 10) {
i = '0' + i;
}
var li = document.createElement("li");
li.innerText = i;
ulMinute.appendChild(li);
}
// 选择结束时间分钟
var ulEndMinute = document.createElement("ul");
$("#endTimeSelect #endMinute").append(ulEndMinute);
for(var i = 0; i < 60; i++) {
if(i < 10) {
i = '0' + i;
}
var li = document.createElement("li");
li.innerText = i;
ulEndMinute.appendChild(li);
}
//点击并选择开始时间小时
var liHour = $("#hour ul li");
for(var i = 0; i < liHour.length; i++) {
liHour[i].onclick = (function (i) {
return function () {
var inputHour = document.getElementById('inputHour');
if(i < 10) {
inputHour.innerText = '0' + i;
} else {
inputHour.innerText = i;
}
}
})(i);
}
//点击并选择结束时间小时
var liEndHour = $("#endHour ul li");
for(var i = 0; i < liEndHour.length; i++) {
liEndHour[i].onclick = (function (i) {
return function () {
var inputEndHour = document.getElementById('inputEndHour');
if(i < 10) {
inputEndHour.innerText = '0' + i;
} else {
inputEndHour.innerText = i;
}
}
})(i);
}
//点击并选择开始时间分钟
var liMinute = $("#minute ul li");
for(var i = 0; i < liMinute.length; i++) {
liMinute[i].onclick = (function (i) {
return function () {
var inputMinute = document.getElementById('inputMinute');
if(i < 10) {
inputMinute.innerText = '0' + i;
} else {
inputMinute.innerText = i;
}
}
})(i);
}
//点击并选择结束时间分钟
var liEndMinute = $("#endMinute ul li");
for(var i = 0; i < liEndMinute.length; i++) {
liEndMinute[i].onclick = (function (i) {
return function () {
var inputEndMinute = document.getElementById('inputEndMinute');
if(i < 10) {
inputEndMinute.innerText = '0' + i;
} else {
inputEndMinute.innerText = i;
}
}
})(i);
}
// 给选择的时间添加样式
$("ul li").click(function(){
$(this).addClass("active");
$(this).siblings().removeClass("active");
})
// 点击确定将已选的开始时间赋值给input
$("#ensure").click(function(){
var startTime = inputHour.innerText*60 + inputMinute.innerText/1;
var endTime = inputEndHour.innerText*60 + inputEndMinute.innerText/1;
if(startTime > endTime && endTime > 0) {
alert('请输入开始时间小于结束时间');
} else {
var inputHourMinute = inputHour.innerText + ' : ' + inputMinute.innerText;
$('#inputTime').val(inputHourMinute);
$('#timeSelect').hide();
}
})
// 点击确定将已选的结束时间赋值给input
$("#endEnsure").click(function(){
var startTime = inputHour.innerText*60 + inputMinute.innerText/1;
var endTime = inputEndHour.innerText*60 + inputEndMinute.innerText/1;
if(startTime > endTime && startTime > 0) {
alert('请输入结束时间大于开始时间');
} else {
var inputEndHourMinute = inputEndHour.innerText + ' : ' + inputEndMinute.innerText;
$('#inputEndTime').val(inputEndHourMinute);
$('#endTimeSelect').hide();
}
})
// 点击开始时间input显示时间选择div
function showTime() {
$('#timeSelect').show();
}
// 点击结束时间input显示时间选择div
function showEndTime() {
$('#endTimeSelect').show();
}
// 点击取消，关闭开始时间选择div
function closeTime() {
$('#timeSelect').hide();
}
// 点击取消，关闭结束时间选择div
function closeEndTime() {
$('#endTimeSelect').hide();
}
</script>
</body>
</html>
