Bootstrap Timepicker Example

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

by d_unknown

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://cdn.jsdelivr.net/bootstrap.timepicker/0.2.6/css/bootstrap-timepicker.min.css">
<div class="container">
     <h1>Select Times</h1>

     <table border="1" style="width:500px">
                    <col style="width:20%">
                        <col style="width:40%">
                            <col style="width:20%">
                                <col style="width: 20%">
                                    <thead>
                                        <tr>
                                            <th></th>
                                            <th>Hours of Delivey</th>
                                            <th></th>
                                            <th>Max Number of Leads Per Day</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>Monday</td>
                                            <td>
                                                <label>
                                                    <input type="text" style="width:100px" data-bind="value: mondayStartTime" name="start_time" class="timepicker" placeholder="h:mm PM" data-default-time="false"></input>Start</label>
                                                <label>
                                                    <input type="text" style="width:100px" data-bind="value: mondayEndTime" name="start_time" class="timepicker" placeholder="h:mm PM"...

JavaScript

$(function () {
    
    function ViewModel() {
        var self = this;
        
        
        self.mondayStartTime = ko.observable();
        self.mondayEndTime = ko.observable();
        self.mondayMaxNumberOfLeads = ko.observable();
    
        self.tuesdayStartTime = ko.observable();
        self.tuesdayEndTime = ko.observable();
        self.tuesdayMaxNumberOfLeads = ko.observable();
    
        self.wednesdayStartTime = ko.observable();
        self.wednesdayEndTime = ko.observable();
        self.wednesdayMaxNumberOfLeads = ko.observable();
    
        self.thursdayStartTime = ko.observable();
        self.thursdayEndTime = ko.observable();
        self.thursdayMaxNumberOfLeads = ko.observable();
    
        self.fridayStartTime = ko.observable();
        self.fridayEndTime = ko.observable();
        self.fridayMaxNumberOfLeads = ko.observable();
    
        self.saturdayStartTime = ko.observable();
        self.saturdayEndTime = ko.observable();
        self.saturdayMaxNumberOfLeads = ko.observable();
    
        self.sundayStartTime = ko.observable();
        self.sundayEndTime = ko.observable();
        self.sundayMaxNumberOfLeads = ko.observable();
        
        self.setTime = function () {
            alert("Time submitted");
        };
    }

    ko.applyBindings(new ViewModel());

    $('.timepicker').timepicker().on('changeDate', function(ev){
         $('.timepicker').timepicker('hide');
         });

    
});