Knockout.js自定义引导日期选择器绑定加上值绑定

我需要将引导数据采集器附加到两个输入字段，这两个字段也需要值绑定，因为我需要能够根据可观察数据的变化动态设置输入值

到目前为止，绑定的工作方式只有一种：当我在datepicker中选择一个日期时，可观察的对象被正确地更新。但是，当我在viewmodel中更改附加的observable的值时，输入不会反映更改

这是我的绑定处理程序：

ko.bindingHandlers.bootstrapDP = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        var options = allBindingsAccessor().datepickerOptions || {};
        $(element).bootstrapDP(options).on("changeDate", function (ev) {
            var observable = valueAccessor();
            observable($(element).val());
        });
    },
    update: function (element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        $(element).bootstrapDP("setValue", value);
    }
};

ko.bindingHandlers.bootstrapDP = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        var options = allBindingsAccessor().datepickerOptions || {};
        $(element).bootstrapDP(options);
    },
    update: function (element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        $(element).bootstrapDP("update", value);
    }
};

在我的viewmodel中，我有一个封装startDate和endDate的对象：

self.dateFilter = {
    startDate: ko.observable(),
    endDate: ko.observable()
};

这是我的HTML：

<input type="text" data-bind="bootstrapDP: dateFilter.startDate, value: dateFilter.startDate" />
<input type="text" data-bind="bootstrapDP: dateFilter.endDate, value: dateFilter.endDate" />

我正在使用这个日期选择器库（在

noConflict（）

-模式下）：

此处的文档：

---

我需要添加/更改/执行哪些不同的操作才能获得所需的结果？

我相信您想要更改这一行：

$(element).bootstrapDP("setValue", value);

致：

这是从引导日期选择器中获取的

下面的代码片段演示了这一工作原理

$.fn.bootstrapDP=$.fn.datepicker；
ko.bindingHandlers.bootstrapDP={
init:function（元素、valueAccessor、allBindingsAccessor）{
var options=allBindingsAccessor（）.datepickerOptions | |{}；
$（元素）.bootstrapDP（选项）.on（“更改日期”，函数（ev）{
var可观测=valueAccessor（）；
可观测（$（元素）.val（））；
});
},
更新：函数（元素、值访问器）{
var value=ko.utils.unwrapobbservable（valueAccessor（））；
//使用“更新”而不是“设置值”
$（元素）.bootstrapDP（“更新”，值）；
}
};
var vm={
起始日期：ko.可观察（），
结束日期：可观察到的
};
ko.应用绑定（vm）；
setTimeout（函数（）{
vm.startDate（新日期（））
}, 1000);
这是我最后的工作代码，只针对那些需要快速工作解决方案且不想通过注释工作的人：

自定义绑定处理程序：

ko.bindingHandlers.bootstrapDP = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        var options = allBindingsAccessor().datepickerOptions || {};
        $(element).bootstrapDP(options).on("changeDate", function (ev) {
            var observable = valueAccessor();
            observable($(element).val());
        });
    },
    update: function (element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        $(element).bootstrapDP("setValue", value);
    }
};

ko.bindingHandlers.bootstrapDP = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        var options = allBindingsAccessor().datepickerOptions || {};
        $(element).bootstrapDP(options);
    },
    update: function (element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        $(element).bootstrapDP("update", value);
    }
};

viewmodel中日期的可观测值：

self.dateFilter = {
    startDate: ko.observable(),
    endDate: ko.observable()
};

带有绑定的HTML：

<input type="text" data-bind="bootstrapDP: dateFilter.startDate, value: dateFilter.startDate" />
<input type="text" data-bind="bootstrapDP: dateFilter.endDate, value: dateFilter.endDate" />


你能加一把小提琴吗。让我沮丧的是，在这一点上，我不能包括小提琴。我所处的网络中，我在fiddle/pen/bin中添加的外部库无法加载：（你能在你的问题中发布一个链接到你正在使用的datepicker库吗？我在问题中添加了一个链接，这里又是：是的，这也解决了我的另一个问题：datepicker没有用我的初始值从观察值中正确初始化。我不得不更进一步，甚至删除
changeDate
函数值绑定已经完全做到了。@connexo很高兴我能帮助buddy