Knockout绑定Eonasdan日期选择器时dp.change事件触发异常

我来帮你搞定这个Knockout和Eonasdan日期选择器的绑定问题！你遇到的核心问题是dp.change事件在打开日历图标时就触发，而非用户实际选择日期后触发，导致首次选择的日期被忽略。这大概率是组件初始化阶段的默认事件触发和Knockout绑定逻辑冲突导致的，下面是针对性的解决方案：

问题分析 #

Eonasdan日期选择器在初始化时，尤其是配置了useCurrent: false时，可能会自动触发一次dp.change事件，而原绑定处理器没有区分这是初始化触发还是用户操作触发，导致视图模型被提前更新（甚至是错误的空值/初始值），而用户真正选择日期时的事件反而没被正确处理。

修改后的Knockout绑定处理器 #

我们需要在绑定逻辑中加入初始化标记，跳过组件初始化时的事件触发，同时优化值同步逻辑：

ko.bindingHandlers.datepicker = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        var options = allBindingsAccessor().datepickerOptions || {};
        var isInitializing = true; // 标记是否处于组件初始化阶段

        // 初始化日期选择器
        $(element).datetimepicker(options);

        // 手动同步视图模型的初始值到组件，确保视图与模型一致
        var initialValue = ko.utils.unwrapObservable(valueAccessor());
        if (initialValue) {
            const picker = $(element).data("DateTimePicker");
            picker.date(initialValue);
        }

        // 注册dp.change事件，仅处理用户操作触发的事件
        ko.utils.registerEventHandler(element, "dp.change", function (event) {
            // 跳过初始化阶段的自动触发
            if (isInitializing) {
                isInitializing = false;
                return;
            }

            var value = valueAccessor();
            if (ko.isObservable(value)) {
                // 因为你的视图模型用的是moment对象，直接赋值moment即可（无需转Date）
                value(event.date ? event.date : null);
            }
        });

        // 清理逻辑保持不变
        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");
        if (picker) {
            var koDate = ko.utils.unwrapObservable(valueAccessor());
            var currentPickerDate = picker.date();

            // 仅当模型值与组件当前日期不一致时才更新，避免循环触发事件
            if (!koDate && currentPickerDate || koDate && !moment(currentPickerDate).isSame(koDate)) {
                picker.date(koDate);
            }
        }
    }
};

关键改动说明 #

1. 初始化标记isInitializing：用来过滤组件初始化时自动触发的dp.change事件，确保只有用户实际选择日期时才更新视图模型。
2. 手动同步初始值：在组件初始化后，主动将视图模型的初始日期同步到选择器，避免初始化时的事件干扰。
3. 优化值赋值逻辑：因为你的视图模型中Startdatum存储的是moment对象，直接使用event.date（moment类型）赋值即可，无需转成Date，保持类型一致。
4. 避免重复更新：在update方法中加入日期对比，只有当模型值和组件当前日期不一致时才更新，防止循环触发事件。

验证你的现有代码 #

你的视图模型和HTML代码无需修改，保持原样即可：

视图模型：

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

HTML：

<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>

修改绑定处理器后，dp.change事件只会在用户选择日期时触发，打开日历图标时不会再触发，首次选择的日期会正确同步到Startdatum Observable中。

内容的提问来源于stack exchange，提问作者Bingla