Styling timepicker.js
Styling your timepicker is as easy as editing your stylesheet. Note that the example below will apply these styles for all timepicker elements on the page.
example.com/index.html
index.html
<!DOCTYPE html>
<html>
<head>
<script src="timepicker.js" defer></script>
<style>
.timepicker {
max-height: 350px;
border: 1px solid 888888;
box-shadow: 3px 3px 8px 0px rgba(0,0,0,0.5);
}
.timepicker li {
border-bottom: 1px solid CCCCCC;
padding: 0.1em 0.5em;
}
.timepicker li.hover {
color: FFFFFF;
background-color: 008000;
font-weight: bold;
}
</style>
</head>
<body>
<label>Time:
<input type="text" data-type="timepicker" value="5:00pm" />
</label>
</body>
</html>
timepicker.js's generated code
timepicker.js will generate the following code for each <input data-type="timepicker"> element. In this example, 12:30am is in mouseover/hover state and has been given the hover class.
<div class="timepicker" tabindex="-1">
<li data-time="00:00:00">12:00am</li>
<li data-time="00:15:00">12:15am</li>
<li data-time="00:30:00" class="hover">12:30am</li>
...
<li data-time="23:45:00">11:45pm</li>
<li data-time="00:00:00">12:00am</li>
</div>