<div id="time_pick">
  <h2 class="time-header">Please Click Here to Select Time</h2>
  <input class="input-time" type="time"  id="appt">
</div>
<div id="timepicker-popup-wrapper-modal_XPQS" class="timepicker-popup-wrapper-modal">
  <div id="timepicker-popup-wrapper">
	<div id="timepicker-value" style="background-color:green;">
		<span id="timepicker-value-hour">--</span>:
		<span id="timepicker-value-minute">--</span>
		<span id="timepicker-value-ampm">--</span>
	</div>
	<div id="timepicker-popup">
		<div id="timepicker-time-hour">
			<span value="01" onmouseover="changehourselectbackground(this)" onmouseout="changehourselectbackgroundnormal(this)" onclick="changehourValue(this)">1</span><span value="02" onmouseover="changehourselectbackground(this)" onmouseout="changehourselectbackgroundnormal(this)" onclick="changehourValue(this)">2</span><span value="03" onmouseover="changehourselectbackground(this)" onmouseout="changehourselectbackgroundnormal(this)" onclick="changehourValue(this)">3</span><span value="04" onmouseover="changehourselectbackground(this)" onmouseout="changehourselectbackgroundnormal(this)" onclick="changehourValue(this)">4</span><span value="05" onmouseover="changehourselectbackground(this)" onmouseout="changehourselectbackgroundnormal(this)" onclick="changehourValue(this)">5</span><span value="06" onmouseover="changehourselectbackground(this)" onmouseout="changehourselectbackgroundnormal(this)" onclick="changehourValue(this)">6</span><span value="07" onmouseover="changehourselectbackground(this)" onmouseout="changehourselectbackgroundnormal(this)" onclick="changehourValue(this)">7</span><span value="08" onmouseover="changehourselectbackground(this)" onmouseout="changehourselectbackgroundnormal(this)" onclick="changehourValue(this)">8</span>
			<span value="09" onmouseover="changehourselectbackground(this)" onmouseout="changehourselectbackgroundnormal(this)" onclick="changehourValue(this)">9</span><span value="10" onmouseover="changehourselectbackground(this)" onmouseout="changehourselectbackgroundnormal(this)" onclick="changehourValue(this)">10</span><span value="11" onmouseover="changehourselectbackground(this)" onmouseout="changehourselectbackgroundnormal(this)" onclick="changehourValue(this)">11</span><span value="12" onmouseover="changehourselectbackground(this)" onmouseout="changehourselectbackgroundnormal(this)" onclick="changehourValue(this)">12</span>
		</div>
		<div id="timepicker-time-minute">
			<span onclick="changeminuteValue(this)" >00</span><span onclick="changeminuteValue(this)" >01</span><span onclick="changeminuteValue(this)" >02</span><span onclick="changeminuteValue(this)" >03</span><span onclick="changeminuteValue(this)" >04</span><span onclick="changeminuteValue(this)" >05</span><span onclick="changeminuteValue(this)" >06</span><span onclick="changeminuteValue(this)" >07</span><span onclick="changeminuteValue(this)" >08</span><span onclick="changeminuteValue(this)" >09</span>
			<span onclick="changeminuteValue(this)" >10</span><span onclick="changeminuteValue(this)" >11</span><span onclick="changeminuteValue(this)" >12</span><span onclick="changeminuteValue(this)" >13</span><span onclick="changeminuteValue(this)" >14</span><span onclick="changeminuteValue(this)" >15</span><span onclick="changeminuteValue(this)" >16</span><span onclick="changeminuteValue(this)" >17</span><span onclick="changeminuteValue(this)" >18</span><span onclick="changeminuteValue(this)" >19</span>
			<span onclick="changeminuteValue(this)" >20</span><span onclick="changeminuteValue(this)" >21</span><span onclick="changeminuteValue(this)" >22</span><span onclick="changeminuteValue(this)" >23</span><span onclick="changeminuteValue(this)" >24</span><span onclick="changeminuteValue(this)" >25</span><span onclick="changeminuteValue(this)" >26</span><span onclick="changeminuteValue(this)" >27</span><span onclick="changeminuteValue(this)" >28</span><span onclick="changeminuteValue(this)" >29</span>
			<span onclick="changeminuteValue(this)" >30</span><span onclick="changeminuteValue(this)" >31</span><span onclick="changeminuteValue(this)" >32</span><span onclick="changeminuteValue(this)" >33</span><span onclick="changeminuteValue(this)" >34</span><span onclick="changeminuteValue(this)" >35</span><span onclick="changeminuteValue(this)" >36</span><span onclick="changeminuteValue(this)" >37</span><span onclick="changeminuteValue(this)" >38</span><span onclick="changeminuteValue(this)" >39</span>
			<span onclick="changeminuteValue(this)" >40</span><span onclick="changeminuteValue(this)" >41</span><span onclick="changeminuteValue(this)" >42</span><span onclick="changeminuteValue(this)" >43</span><span onclick="changeminuteValue(this)" >44</span><span onclick="changeminuteValue(this)" >45</span><span onclick="changeminuteValue(this)" >46</span><span onclick="changeminuteValue(this)" >47</span><span onclick="changeminuteValue(this)" >48</span><span onclick="changeminuteValue(this)" >49</span>
			<span onclick="changeminuteValue(this)" >50</span><span onclick="changeminuteValue(this)" >51</span><span onclick="changeminuteValue(this)" >52</span><span onclick="changeminuteValue(this)" >53</span><span onclick="changeminuteValue(this)" >54</span><span onclick="changeminuteValue(this)" >55</span><span onclick="changeminuteValue(this)" >56</span><span onclick="changeminuteValue(this)" >57</span><span onclick="changeminuteValue(this)" >58</span><span onclick="changeminuteValue(this)" >59</span>
		</div>
		<div id="timepicker-time-ampm">
			<span onclick="changeampmValue(this)" >AM</span><span onclick="changeampmValue(this)" >PM</span>
		</div>
		<span id="timepicker-point"></span>
		<span id="timepicker-hand"></span>	
	</div>
	<div id="timepicker-popup-Buttons-ok-cancel">
		<a href="javascript:void(0)" id="timepicker-popup-Buttons-cancel_XPSQ">CANCEL</a>
		<a href="javascript:void(0)" id="timepicker-popup-Buttons-ok_XPSQ">OK</a>
	</div>
</div>
</div>
body{
  background-color:black;
}
.time-header{
  color:white;
  font-family:sans-serif;
}
#time_pick{
  width:80%;
  text-align:center;
  margin: 3em auto;
}
.timepicker-popup-wrapper-modal {display: none; position: fixed; z-index: 1;padding-top: 100px;left: 0;top: 0;width: 100%;height: 100%;overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4); }
#timepicker-popup-wrapper{width: 14em;height: auto;box-shadow: 1px 2px 8px;background-color: #fefefe;margin: auto;}
#timepicker-popup-wrapper #timepicker-value{width: auto;padding: 1em;font-size: 19px;text-align: center;color: white;}
#timepicker-popup-wrapper #timepicker-value span{display: inline-block;height: 1.1em;width: auto;padding: 4px;cursor: pointer;}
#timepicker-popup-wrapper #timepicker-value span:hover{background-color: #fffcfc;color: black;border-radius: 7px;}
#timepicker-popup-wrapper #timepicker-popup{position: relative;width: 12em;height: 12em;margin: 7% auto;border-radius: 50%;background-color: #dcd9d9;}
#timepicker-popup-wrapper #timepicker-popup-Buttons-ok-cancel{padding: 15px;margin-top: 1.5em;text-align: end;}
#timepicker-popup-wrapper #timepicker-popup-Buttons-ok-cancel a{text-decoration: none;color: green;}
#timepicker-popup-wrapper #timepicker-popup-Buttons-ok-cancel a:nth-child(1){}
#timepicker-popup-wrapper #timepicker-popup-Buttons-ok-cancel a:nth-child(2){margin-left: 20px;margin-right: 14px;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-hour,
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-minute{height: 12em;width: 12em;position: relative;transition: all 1s ease;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-minute{display:none;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-ampm{}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-hour span{position: absolute;display: inline-block;cursor: pointer;height: 20px;width: 20px;padding: 5px;text-align: center;font-weight: bold;border-radius: 50%;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-minute span{position: absolute;display: inline-block;text-align: center;padding: 3px;cursor: pointer;font-size: 10px;border-radius: 50%;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-ampm span{position: absolute;background-color: #dcd9d9;color: black;font-weight: bold;display: inline-block;font-size: x-small;border-radius: 50%;cursor: pointer;padding: 14px;text-align: center;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-minute span:hover{transform: scale(2);background-color: #352f2f;color: white;border-radius: 50%;padding: 3px;}
#timepicker-popup-wrapper #timepicker-popup  #timepicker-hand{width: 60px;display: inline-block;height: 3px;background-color: gray;position: absolute;top: 127px;display: none;left: 67px;transform: rotate(-90deg);}
#timepicker-popup-wrapper #timepicker-popup  #timepicker-point{display: inline-block;background-color: #a4a4dc;height: 5px;padding: 1px;width: 5px;border-radius: 50%;position: absolute;top: 48%;left: 49%;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-ampm span:nth-child(1){right: 0px;bottom: -24px;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-ampm span:nth-child(2){bottom: -24px;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-hour span:nth-child(1){top: 21px;right: 42px;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-hour span:nth-child(2){top: 47px;right: 15px;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-hour span:nth-child(3){right: 5px;top: 42%;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-hour span:nth-child(4){bottom: 46px;right: 19px;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-hour span:nth-child(5){bottom: 18px;right: 42px;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-hour span:nth-child(6){bottom: 5px;left: 43%;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-hour span:nth-child(7){bottom: 17px;left: 44px;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-hour span:nth-child(8){bottom: 45px;left: 15px;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-hour span:nth-child(9){top: 42%;left: 5px;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-hour span:nth-child(10){top: 46px;left: 16px;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-hour span:nth-child(11){top: 18px;left: 44px;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-hour span:nth-child(12){top: 5px;right: 41%;}		
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-minute span:nth-child(1){top: 1px;right: 88px;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-minute span:nth-child(2){top: 4px;right: 67px;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-minute span:nth-child(3){top: 10px;right: 52px;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-minute span:nth-child(4){top: 18px;right: 38px;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-minute span:nth-child(5){top: 28px;right: 25px;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-minute span:nth-child(6){top: 41px;right: 15px;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-minute span:nth-child(7){top: 56px;right: 10px;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-minute span:nth-child(8){top: 73px;right: 5px;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-minute span:nth-child(9){top: 88px;right: 2px;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-minute span:nth-child(10){top: 105px;right: 4px;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-minute span:nth-child(11){top: 118px;right: 10px;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-minute span:nth-child(12){top: 131px;right: 16px;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-minute span:nth-child(13){top: 143px;right: 24px;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-minute span:nth-child(14){top: 154px;right: 34px;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-minute span:nth-child(15){top: 162px;right: 47px;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-minute span:nth-child(16){right: 62px;bottom: 7px;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-minute span:nth-child(17){bottom: 3px;right: 78px;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-minute span:nth-child(18){bottom: 3px;right: 94px;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-minute span:nth-child(19){left: 62px;bottom: 7px;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-minute span:nth-child(20){top: 164px;left: 45px;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-minute span:nth-child(21){top: 154px;left: 34px;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-minute span:nth-child(22){top: 143px;left: 24px;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-minute span:nth-child(23){top: 131px;left: 16px;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-minute span:nth-child(24){top: 118px;left: 10px;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-minute span:nth-child(25){top: 105px;left: 4px;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-minute span:nth-child(26){top: 88px;left: 2px;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-minute span:nth-child(27){top: 73px;left: 5px;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-minute span:nth-child(28){top: 56px;left: 10px;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-minute span:nth-child(29){top: 41px;left: 15px;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-minute span:nth-child(30){top: 28px;left: 25px;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-minute span:nth-child(31){top: 18px;left: 38px;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-minute span:nth-child(32){top: 10px;left: 52px;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-minute span:nth-child(33){top: 4px;left: 67px;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-minute span:nth-child(34){top: 19px;right: 77px;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-minute span:nth-child(35){top: 23px;right: 60px;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-minute span:nth-child(36){top: 33px;right: 46px;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-minute span:nth-child(37){top: 45px;right: 35px;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-minute span:nth-child(38){top: 58px;right: 28px;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-minute span:nth-child(39){top: 70px;right: 25px;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-minute span:nth-child(40){top: 82px;right: 22px;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-minute span:nth-child(41){top: 95px;right: 23px;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-minute span:nth-child(42){top: 109px;right: 25px;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-minute span:nth-child(43){bottom: 53px;right: 32px;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-minute span:nth-child(44){bottom: 43px;right: 40px;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-minute span:nth-child(45){bottom: 30px;right: 57px;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-minute span:nth-child(46){right: 72px;bottom: 23px;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-minute span:nth-child(47){bottom: 20px;left: 89px;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-minute span:nth-child(48){bottom: 21px;left: 74px;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-minute span:nth-child(49){bottom: 27px;left: 60px;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-minute span:nth-child(50){bottom: 35px;left: 48px;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-minute span:nth-child(51){bottom: 42px;left: 41px;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-minute span:nth-child(52){top: 122px;left: 32px;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-minute span:nth-child(53){top: 109px;left: 27px;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-minute span:nth-child(54){top: 92px;left: 23px;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-minute span:nth-child(55){top: 78px;left: 24px;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-minute span:nth-child(56){top: 66px;left: 27px;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-minute span:nth-child(57){top: 51px;left: 35px;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-minute span:nth-child(58){top: 37px;left: 47px;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-minute span:nth-child(59){top: 25px;left: 61px;}
#timepicker-popup-wrapper #timepicker-popup #timepicker-time-minute span:nth-child(60){top: 20px;left: 80px;}
.input-time{color: #31ea31;background-color: #b9f1b9;border: 1px solid #78e878;text-align: center;padding: 15px;border-radius: 10px;}
var timeSelected = "06"
var ampmSelected = "AM"
var minSelected = "00"
var btn = document.getElementById("appt");
window.onclick = function(event) {
	if (event.target == document.getElementById("timepicker-popup-wrapper-modal_XPQS")) {
	document.getElementById("timepicker-popup-wrapper-modal_XPQS").style.display = "none";
	}
}
btn.onclick = function() {
	document.getElementById("timepicker-popup-wrapper-modal_XPQS").style.display = "block";
}

function changehourselectbackgroundnormal(el){
	el.style.backgroundColor =""
	el.style.color ="black"			
}
function changehourselectbackground_XPQS(value){
	var l = document.getElementById("timepicker-hand")
	l.style.display= "block"
	if( value == "10"){
		l.style.top = "78px"
		l.style.left = "40px"
		l.style.transform = "rotate(29deg)"	
	}
	if(value == "09"){
		l.style.top = "94px"
		l.style.left = "34px"
		l.style.transform = "rotate(0deg)"
	}
	if(value == "08"){
		l.style.top = "110px"
		l.style.left = "38px"
		l.style.transform = "rotate(-30deg)"
	}
	if(value == "07"){
		l.style.top = "122px"
		l.style.left = "50px"
		l.style.transform = "rotate(-58deg)"
	}
	if(value == "06"){
		l.style.top = "127px"
		l.style.left = "67px"
		l.style.transform = "rotate(-90deg)"
	}
	if(value == "05"){
		l.style.top = "122px"
		l.style.left = "83px"
		l.style.transform = "rotate(-119deg)"
	}
	if(value == "04"){
		l.style.top = "110px"
		l.style.left = "96px"
		l.style.transform = "rotate(-150deg)"
	}
	if(value == "03"){
		l.style.top = "94px"
		l.style.left = "unset"
		l.style.right = "35px"
		l.style.transform = "rotate(0deg)"
	}
	if(value == "02"){
		l.style.top = "78px"
		l.style.left = "95px"
		l.style.transform = "rotate(150deg)"
	}
	if(value == "01"){
		l.style.top = "65px"
		l.style.left = "84px"
		l.style.transform = "rotate(120deg)"
	}
	if(value == "11"){
		l.style.top = "66px"
		l.style.left = "50px"
		l.style.transform = "rotate(58deg)"
	}
	if(value == "12"){
		l.style.top = "60px"
		l.style.left = "67px"
		l.style.transform = "rotate(90deg)"
	}
}
function changehourselectbackground(el){
	el.style.backgroundColor = "green"
	el.style.color = "white"
	changehourselectbackground_XPQS(el.getAttribute("value"));
}
function changehourValue(el){
	timeSelected = el.getAttribute("value")
	el.style.backgroundColor = "green"
	el.style.color = "white"
	changehourselectbackground_XPQS(timeSelected);
	document.getElementById("timepicker-value-hour").innerHTML = timeSelected
	document.getElementById("timepicker-hand").style.display = "none"
	showtimepickerMinute()
}
function changeampmValue(el){
	ampmSelected = el.innerHTML
	document.getElementById("timepicker-value-ampm").textContent = ampmSelected
}
function changeminuteValue(el){
	minSelected = el.innerHTML
	document.getElementById("timepicker-hand").style.display = "none"
	document.getElementById("timepicker-value-minute").textContent = minSelected
	showtimepickerHour()
}
function showtimepickerHour(){
	document.getElementById("timepicker-time-minute").style.display = "none"
	document.getElementById("timepicker-time-hour").style.display = "block"
	document.getElementById("timepicker-hand").style.display = "block"
}
function showtimepickerMinute(){
	document.getElementById("timepicker-time-hour").style.display = "none"
	document.getElementById("timepicker-time-minute").style.display = "block"
	document.getElementById("timepicker-hand").style.display = "none"	
}
function convertTime12to24(time12h){
	var [time, modifier] = time12h.split(' ');
	var [hours, minutes] = time.split(':');
	if (hours === '12') {hours = '00';}
	if (modifier === 'PM') {hours = parseInt(hours, 10) + 12;}
	return hours+":"+minutes;
}
document.getElementById("timepicker-value-hour").addEventListener("click",function(){showtimepickerHour()});
document.getElementById("timepicker-value-minute").addEventListener("click",function(){showtimepickerMinute()});
document.getElementById("timepicker-popup-Buttons-cancel_XPSQ").addEventListener("click",function(){document.getElementById("timepicker-popup-wrapper-modal_XPQS").style.display = "none";});
document.getElementById("timepicker-popup-Buttons-ok_XPSQ").addEventListener("click",function(){
	document.getElementById("timepicker-popup-wrapper-modal_XPQS").style.display = "none";
	document.getElementById("appt").value = convertTime12to24(timeSelected +":"+minSelected+" "+ampmSelected);
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.