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

【问题标题】：Knockout.js custom bootstrap datepicker binding plus value bindingKnockout.js 自定义引导日期选择器绑定加值绑定
【发布时间】：2023-04-08 20:13:01
【问题描述】：

我需要将引导日期选择器附加到两个也需要值绑定的输入字段，因为我需要能够根据我的 observable 的变化动态设置输入的值。

到目前为止，绑定仅以一种方式起作用：当我在 datepicker 中选择一个日期时，observable 会正确更新。但是当我在我的视图模型中更改附加的 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);
    }
};

在我的视图模型中，我有一个封装 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" />

我正在使用这个 datepicker 库（noConflict()-mode）：https://github.com/eternicode/bootstrap-datepicker

文档在这里：http://bootstrap-datepicker.readthedocs.org/en/stable/

我需要添加/更改/做些什么来获得想要的结果？

【问题讨论】：

你能加个小提琴吗？欢呼
令我沮丧的是，在这一点上我不能包括小提琴。我在一个网络中，我在小提琴/笔/bin中添加的外部库不会加载:(
能否将问题中的链接发布到您正在使用的日期选择器库？
我在问题中添加了一个链接，这里又是：github.com/eternicode/bootstrap-datepicker

标签： knockout.js custom-binding

【解决方案1】：

我相信你想改变这一行：

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

收件人：

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

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

下面的 sn-p 演示了这个工作。

$.fn.bootstrapDP = $.fn.datepicker;

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());
    // use "update" instead of "setValue"
    $(element).bootstrapDP("update", value);
  }
};

var vm = {
  startDate: ko.observable(),
  endDate: ko.observable()
};
ko.applyBindings(vm);

setTimeout(function(){
  vm.startDate(new Date())
}, 1000);

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/css/bootstrap-datepicker3.standalone.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/js/bootstrap-datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

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

【讨论】：

是的，这也解决了我遇到的另一个问题：日期选择器没有使用我从 observables 中获得的初始值正确初始化。我不得不更进一步，甚至完全删除了changeDate 函数。值绑定已经完全做到了。
@connexo 很高兴我能帮助好友

【解决方案2】：

所以这是我最终得到的工作代码，仅适用于那些需要快速工作解决方案并且不想通过 cmets 工作的人：

自定义绑定处理程序：

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);
    }
};

视图模型中日期的 Observable：

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

【讨论】：