在 Knockoutjs 中引导 DatePicker 绑定答案

【问题标题】：Bootstrap DatePicker binding in Knockoutjs在 Knockoutjs 中引导 DatePicker 绑定
【发布时间】：2016-09-18 20:54:34
【问题描述】：

我在一个 asp.net mvc 应用程序中使用 bootstrap datepicker 并将所选日期与 knockoutjs 绑定

淘汰赛绑定：

ko.bindingHandlers.datepicker = {
      init: function(element, valueAccessor, allBindingsAccessor) {
          //initialize datepicker with some optional options
          var options = allBindingsAccessor().datepickerOptions || {
              useCurrent: false,
              format: 'mm/dd/yyyy'
          };
          $(element).datepicker(options);

          //when a user changes the date, update the view model
          ko.utils.registerEventHandler(element, "changeDate", function(event) {
               var value = valueAccessor();
               if (ko.isObservable(value)) {
                   value(event.date);
               }
          });
      },
      update: function(element, valueAccessor) {
          var widget = $(element).data("datepicker");
          //when the view model is updated, update the widget
          if (widget) {
              widget.date = ko.utils.unwrapObservable(valueAccessor());
              widget.setValue();
          }
      }
 };

 var model = {
    StartDate: ko.observable(),
    EndDate: ko.observable()
 };

 ko.applyBindings(model, $("#target")[0]);

Jsfiddle of what I have done.

现在，在完成表单后，表单使用 ajax post 提交到服务器。

返回时，我想清除选定的开始日期和结束日期输入字段。

我试过这个：

self.StartDate(null);
self.EndDate(null);

这将清除属性，但输入仍保留选定的日期。有没有办法不仅清除属性，还清除输入值？

另外，在淘汰赛自定义绑定初始化函数中，有没有办法链接两个日期输入以使其成为一个范围，例如演示 here？在演示中，选择范围单选按钮时，但字段在一起作为范围工作。

【问题讨论】：

在你的更新方法中，你只需要将输入的值设置为 unwrapped observable 的值。所以例如定义值 var value = ko.utils.unwrapObservable(valueAccessor()); 然后在更新的最后一行，您可以执行 $(element).val(value); 来更改 datepicker 组件给出的输入值（可观察值正常更改，所以这里不用担心）

标签： jquery asp.net-mvc twitter-bootstrap knockout.js datepicker

【解决方案1】：

看起来您正在使用此Bootstrap datepicker，并且在活页夹update 函数中清除（或通过 KO 设置任何日期）时将小部件日期设置为 KO 日期的 API 调用不正确。

这行得通（见JSFiddle）：

$(element).datepicker("update", ko.utils.unwrapObservable(valueAccessor()));

【讨论】：

【解决方案2】：

遵循 Kasperoo 建议：

改变这个：

  update: function(element, valueAccessor) {
        var widget = $(element).data("datepicker");

        if (widget) {
           widget.date = ko.utils.unwrapObservable(valueAccessor());
           widget.setValue();
        }
  }

到

  update: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        $(element).val(value);
  }

帮助清除服务器回发上的字段。

【讨论】：