Bootstrap Timepicker Example

This is a simple Bootstrap skeleton. You can fork it to get a ready to use Bootstrap fiddle.

by Jon Kittell

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="http://jdewit.github.io/bootstrap-timepicker/js/bootstrap-timepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://jdewit.github.io/bootstrap-timepicker/css/bootstrap-timepicker.min.css">
<div class="container">
     <h1>Select Two Times</h1>

    <form>
        <br />
        <input type="text" data-bind="value: mondayStartTime" name="start_time" class="timepicker" placeholder="h:mm PM" data-default-time="false"></input>
        <input type="text" data-bind="value: mondayEndTime" name="start_time" class="timepicker" placeholder="h:mm PM" data-default-time="false"></input>
        <button data-bind="click: setTime">Click Me</button>
    </form>
    
</div>

JavaScript

$(function () {
    
    function ViewModel() {
        var self = this;
        self.mondayStartTime = ko.observable();
        self.mondayEndTime = ko.observable();
        
        self.setTime = function () {
            $('.bootstrap-timepicker-widget').removeClass('open');
            alert("Time submitted");
        };
    }

    ko.applyBindings(new ViewModel());

    $('.timepicker').timepicker();
    
});