jQuery TimePicker with Knockout

by Suresh Shenoy

HTML

<link rel="stylesheet" href="http://jonthornton.github.io/jquery-timepicker/jquery.timepicker.css">
<script src="http://jonthornton.github.io/jquery-timepicker/jquery.timepicker.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.2.0/knockout-min.js"></script>

<p>Current value is <span data-bind="text: Time"></span></p>

<form>
  <input type="text" data-bind="timepicker: Time" />
</form>

CSS

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

JavaScript

ko.bindingHandlers.timepicker = {
        init: function (element, valueAccessor, allBindingsAccessor) {
            //initialize datepicker with some optional options
            var options = allBindingsAccessor().timepickerOptions || {};
            $(element).timepicker(options);

            //handle the field changing
            ko.utils.registerEventHandler(element, "change", function () {

                var observable = valueAccessor();
               // observable($(element).timepicker("getTime"));
                observable($(element).val());
            });

            //handle disposal (if KO removes by the template binding)
            ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
                $(element).timepicker("remove");
            });

        },
        //update the control when the view model changes
        update: function (element, valueAccessor) {
            var value = ko.utils.unwrapObservable(valueAccessor()),
            current = $(element).timepicker("getTime");

            //if (value - current !== 0) {
                $(element).timepicker("setTime", value);
           // }
        }
    };