knockout.js 具有Eonasdan日期选择器的Knockout bindingHandler在选择日期时不会触发dp.change事件

jm81lzqq  于 2022-11-10  发布在  其他
关注(0)|答案(2)|浏览(141)

我正在使用Knockout(3.4.2版),时刻(2.29.1版)和Eonasdan日期选择器(4.17.47版)插件选择日期.
我的问题是,当用户选择日期时,dp.change事件不会被触发,而是在datepicker/widget打开时触发,即用户单击日历图标。
结果是用户选取的第一个日期被忽略(事件在实际选取日期之前激发),并且仅当用户再次打开日期选取器并激发事件时,才会更新日期。
我一直在使用eonasdans安装页面中的knockout bindinghandle示例:http://eonasdan.github.io/bootstrap-datetimepicker/Installing/

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

        //when a user changes the date, update the view model
        ko.utils.registerEventHandler(element, "dp.change", function (event) {
            var value = valueAccessor();
            if (ko.isObservable(value)) {
                if (event.date != null && !(event.date instanceof Date)) {
                    value(event.date.toDate());
                } else {
                    value(event.date);
                }
            }
        });

        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
            var picker = $(element).data("DateTimePicker");
            if (picker) {
                picker.destroy();
            }
        });
    },
    update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {

        var picker = $(element).data("DateTimePicker");
        //when the view model is updated, update the widget
        if (picker) {
            var koDate = ko.utils.unwrapObservable(valueAccessor());

            //in case return from server datetime i am get in this form for example /Date(93989393)/ then fomat this
            //koDate = (typeof (koDate) !== 'object') ? new Date(parseFloat(koDate.replace(/[^0-9]/g, ''))) : koDate;

            picker.date(koDate);
        }
    }
};

我的绝色佳人观点是这样的:

var exportLicenserModel = function () {
        var self = this;
        self.Startdatum = ko.observable((new moment()).month(0).date(1));
}

而于飞则是:

<div class='input-group js-date'>
  <input type="text" class="form-control" id="licenseStartDate" data-bind="datepicker: Startdatum, datepickerOptions: { locale: 'sv', format: 'YYYY-MM-DD', useCurrent: false }" />
  <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
km0tfn4u

km0tfn4u1#

看起来运行得很好。我在dp.change处理程序中添加了一个console.log语句,还添加了一个文本绑定来显示Startdatum的当前值。处理程序被调用,值被更新。请看下面的代码片段:
第一个

w1e3prcc

w1e3prcc2#

我找到了为什么dp.change事件似乎没有触发的原因。
项目中有一个旧的过时的jQuery类,它查找标记的日期选择器并激活它们,使它们绑定两次。

$('.js-date').datetimepicker({ locale: 'sv', format: 'YYYY-MM-DD', useCurrent: false });

去掉这个之后,一切都像预期的那样工作。

相关问题