Question

我使用bootstrap datepicker并在asp.net mvc应用程序中使用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？在演示中，选择“范围”单选按钮时，但字段作为范围一起工作。

Answer 1

看起来您正在使用此Bootstrap datepicker，并且在绑定update功能中清除（或通过KO设置任何日期）时，将小部件日期设置为KO日期的API调用。

这有效（见JSFiddle）：

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

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

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

Knockoutjs中的Bootstrap DatePicker绑定

2 个答案: