jQuery TimePicker Example:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
  <title>jQuery timePicker</title>
 <style type="text/css" media="all">
 div.time-picker {
  position: absolute;
  height: 191px;
  width:4em; /* needed for IE */
  overflow: auto;
  background: #fff;
  border: 1px solid #aaa;
  z-index: 99;
  margin: 0;
}
div.time-picker-12hours {
  width:6em; /* needed for IE */
}


div.time-picker ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
div.time-picker li {
  cursor: pointer;
  height: 10px;
  font: 12px/1 Helvetica, Arial, sans-serif;
  padding: 4px 3px;
}
div.time-picker li.selected {
  background: #0063CE;
  color: #fff;
}</style>
  
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
  
  <!--Download jquery.timePicker.js from below link;
   jquery-timepicker.googlecode.com/files/jquery.timepicker.js
  -->
  <script type="text/javascript" src="jquery.timePicker.js"></script>
  <script type="text/javascript">
  jQuery(function() {
         $("#shwtime").timePicker();
      
  });
  </script>
</head>


<body>
<h1>jQuery timePicker</h1>
<div><input type="text" id="shwtime" size="10" value="08:00" name="shwtime" /> </div>
</body>