Simple Time Picker UI

A compact time picker ui.

by Victor

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<div class="timePicker">

    
    <div class="hourWrapper"> 
        <span>Hour</span>
        <a href="#" class="tpUp"><span class="fa fa-caret-up"></span></a>
        <div class="hour">2</div>
        <a href="#" class="tpDown"><span class="fa fa-caret-down"></span></a>
    </div>
        <div class="minuteWrapper">
             <span>Min.</span>
        <a href="#" class="tpUp"><span class="fa fa-caret-up"></span></a>
        <div class="minute">15</div>
        <a href="#" class="tpDown"><span class="fa fa-caret-down"></span></a>
    </div>
    <div class="ampmWrapper">
        <span>am/pm</span>
        <a href="#" class="tpUp"><span class="fa fa-caret-up"></span></a>
        <div class="nightDay">AM</div>
        <a href="#" class="tpDown"><span class="fa fa-caret-down"></span></a>
    </div>
</div>

CSS

.timePicker {
    border:1px solid #888;
    clear:none;
    padding:5px 5px 0;
    display:inline-block;
    border-radius:5px;
    background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(229,229,229,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(229,229,229,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
}
.hourWrapper, .minuteWrapper, .ampmWrapper {
    background: #e3e3e3;
    border:1px solid #333;
    width:50px;
    text-align:center;
    /* float:left; */
    display:inline-block;
    margin:0;
    margin-right: 10px;
    border-radius:4px;
    overflow:hidden;
    box-shadow:inset 0 0 4px #d3d3d3, 1px 1px 0 white;
    background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(243,243,243,1) 50%, rgba(237,237,237,1) 51%, rgba(255,255,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(50%,rgba(243,243,243,1)), color-stop(51%,rgba(237,237,237,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(243,243,243,1)...

JavaScript

//hour
$('.hourWrapper a').click(function(){
    
    if ($(this).attr('class') === 'tpUp'){
    var currentNum = $(this).siblings('.hour').html();
        var newNum = parseInt(currentNum) + 1;
        
        if(newNum === 13){ newNum = 1};
        $(this).siblings('.hour').html(newNum);

    }
     if ($(this).attr('class') === 'tpDown'){
    var currentNum = $(this).siblings('.hour').html();
        var newNum = parseInt(currentNum) - 1;
        
        if(newNum === 0){ newNum = 12};
        $(this).siblings('.hour').html(newNum);

    }
    return false;
});

//minute
$('.minuteWrapper a').click(function(){
    
    if ($(this).attr('class') === 'tpUp'){
    var currentNum = $(this).siblings('.minute').html();
        var newNum = parseInt(currentNum) + 1;
        
        if(newNum === 60){ newNum = 1};
        $(this).siblings('.minute').html(newNum);

    }
     if ($(this).attr('class') === 'tpDown'){
    var currentNum = $(this).siblings('.minute').html();
        var newNum = parseInt(currentNum) - 1;
        
        if(newNum === 0){ newNum = 59};
        $(this).siblings('.minute').html(newNum);

    }
    return false;
});

// am.pm
$('.ampmWrapper a').click(function(){
    if ($(this).siblings('.nightDay').html() === 'AM') {
    $(this).siblings('.nightDay').html('PM')
    } else {
            $(this).siblings('.nightDay').html('AM')
    };
    
    return false;
});