Bootstrap timepicker Knockout js绑定处理程序

Question

用于 twitter 引导时间选择器的 Knockout js 活页夹。

click here 用于时间选择器插件

Answer 1

我们正在将时刻 js 对象转换为格式化的时间字符串，但您可以删除我们正在转换的代码并使用它。

$(function () {
    ko.bindingHandlers.timePickerMoment = {
        init: function (element, valueAccessor, allBindingsAccessor) {
            //initialize timepicker with some optional options
            var options = allBindingsAccessor().timePickerOptions || {};
            var valueOfElement = ko.unwrap(valueAccessor());
            $(element).val(valueOfElement.format("HH:mm")); //Converting moment object to HH:mm
            $(element).timepicker(options);

            //when a user changes the date, update the view model
            ko.utils.registerEventHandler(element, "changeTime.timepicker", function (event) {
                var value = valueAccessor();
                if (ko.isObservable(value)) {   
                    value(moment(event.time.value, 'HH:mm')); //Converting HH:mm to moment
                }
            });
        },
        update: function (element, valueAccessor) {
            var widget = $(element).val();
            //when the view model is updated, update the widget
            if (widget) {
                var date = ko.utils.unwrapObservable(valueAccessor());
                $(element).val(date.format("HH:mm")); //Converting moment object to HH:mm
            }
        }
    };
});

这就是它的使用方式。

data-bind="dateTimePickerMoment: OpeningTimeMoment, dateTimePickerOptions:{ locale: 'en-GB', format: 'HH:mm', showClose: true }, asString: true"