Timepicker

by André Albson

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script>
<script src="http://jdewit.github.com/bootstrap-timepicker/assets/bootstrap-timepicker/js/bootstrap-timepicker.js"></script>
<link rel="stylesheet" href="http://jdewit.github.com/bootstrap-timepicker/assets/bootstrap-timepicker/css/timepicker.css">
<div class="input-append bootstrap-timepicker-component">
    <input type="text" class="timepicker-default input-small">
    <span class="add-on">
        <i class="icon-time"></i>
    </span>
</div>
<div class="input-append bootstrap-timepicker-component">
    <input type="text" class="timepicker-value input-small" value="12:42 PM">
    <span class="add-on">
        <i class="icon-time"></i>
    </span>
</div>

CSS

body { padding: 40px; }

JavaScript

$('.timepicker-default').timepicker({defaultTime: '11:42 PM'});

$('.timepicker-value').timepicker({defaultTime: 'value'});