Edit in JSFiddle

$(document).ready(function(){
    // initialize both timepickers at once
    $('input.timepicker').timepicker({
        timeFormat: 'hh:mm p',
        // year, month, day and seconds are not important
        minTime: new Date(0, 0, 0, 8, 0, 0),
        maxTime: new Date(0, 0, 0, 15, 0, 0),
        // time entries start being generated at 6AM but the plugin 
        // shows only those within the [minTime, maxTime] interval
        startHour: 6,
        // the value of the first item in the dropdown, when the input
        // field is empty. This overrides the startHour and startMinute 
        // options
        startTime: new Date(0, 0, 0, 8, 20, 0),
        // items in the dropdown are separated by at interval minutes
        interval: 10,
        change: function(time) {
            var element = $(this), text, color;
            var timepicker = element.timepicker();
            
            color = '#' + (~~(Math.random() * 16777215)).toString(16);
            element.css({'background': color});
        }
    });
});

<h1>jQuery TimePicker Demo</h1>
   
    <p>The <code>change</code> callback is executed everytime a new time entry is selected or entered. If this demo the change callback is used to change the text input's background color every time a the current time changes.</p>
    
    <br/>

    <div>
        <input id="tp1" class="timepicker" name="timepicker" />
    </div>
    
    <br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/>

<a href="http://github.com/you"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>

.ui-timepicker-container {
    position: absolute;
    overflow: hidden;
}

.ui-timepicker {
    display: block;
    height: 200px;
    text-align: center;
    list-style: none outside none;
    overflow: auto;
    overflow-x: hidden; /* IE */
    margin: 0;
    padding: 0 0 0 1px;
}
.ui-timepicker-standard {
    /* .ui-widget */
    font-family: Verdana,Arial,sans-serif;
    font-size: 1.1em;
    /* .ui-widget-content */
    background-color: #FFF;
    border: 1px solid #AAA;
    color: #222;
    /* .ui-menu */
    margin: 0;
    padding: 2px;
}
.ui-timepicker-standard a {
    /* .ui-widget-content a */
    color: #222;
}
.ui-timepicker-standard .ui-state-hover {
    /* .ui-state-hover */
    background-color: #DADADA;
    border: 1px solid #999;
    font-weight: normal;
    color: #212121;
}
.ui-timepicker-standard .ui-menu-item {
    /* .ui-menu .ui-menu-item */
    /*clear: left;
    float: left;*/
    margin: 0;
    padding: 0;
    /*width: 100%;*/
}
.ui-timepicker-standard .ui-menu-item a {
    /* .ui-menu .ui-menu-item a */
    display: block;
    padding: 0.2em 0.4em;
    line-height: 1.5;
    text-decoration: none;
}
.ui-timepicker-standard .ui-menu-item a.ui-state-hover {
    /* .ui-menu .ui-menu-item a.ui-state-hover */
    font-weight: normal;
    margin: -1px -1px -1px -1px;
}
 .ui-timepicker-corners, .ui-timepicker-corners .ui-corner-all {
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}
.ui-timepicker-hidden {
    /* .ui-helper-hidden */
    display: none;
}

body {
    background: #EFEFEF;
    padding: 20px;
}
h1 {
    font-weight: bold;
    margin-top: 100px;
}
p {
    margin: 10px 0;
}