Bootstrap 3 Datepicker - Knockout.js

有沒有人使用過，成功的話，Bootstrap 3 Datepicker加上knockout.js？Bootstrap 3 Datepicker - Knockout.js

我在datepickers和knockout.js bindingHandlers上度過了我的下午，但沒有成功。

這是我目前的knockout.bindingHandler：

ko.bindingHandlers.datepicker = { 
    init: function (element, valueAccessor, allBindingsAccessor) { 
     //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("DateTimePicker"); 
     if (widget) { 
      widget.date = ko.utils.unwrapObservable(valueAccessor()); 
      widget.setValue(); 
     } 
    } 
};

這裏是我的ViewModel：

function TurbineHistoryViewModel() { 
    var self = this; 

    self.severity1 = ko.observable(1); 
    self.severity2 = ko.observable(2); 
    self.severity3 = ko.observable(3); 
    self.severity4 = ko.observable(4); 
    self.severity6 = ko.observable(6); 

    self.fromDate = new ko.observable(new Date()); 
    self.toDate = new ko.observable(new Date()); 
}

...這裏是我的標記：

<div class='input-group date' id='datetimepicker1'> 
    <input type='text' class="form-control" data-bind="datepicker: objVM.fromDate"/> 
    <span class="input-group-addon"> 
     <span class="glyphicon glyphicon-calendar"></span> 
    </span> 
</div>

如果有人有一個好日期選擇器和knockout.js的工作示例，我將非常樂意聽到它。

來源

2015-11-07 ThomasE

顯示您的企圖到目前爲止，也許你已經走上了正軌。 – Tomalak

我明白了你的觀點，但問題是我錯過了日期選擇器和相應的knockout.bindinghandler之間的直接連接。我可以看到該視圖調用綁定處理程序，但由於某種原因失敗。 – ThomasE

是的，但要找出爲什麼我們需要看代碼，你不覺得嗎？ ;） – Tomalak

的解決方案是使用在這裏找到了自舉的DatePicker 3淘汰賽bindinghandler：

Bootstrap Datetimepicker installation in Knockout JS

，然後設置區域設置和日期格式的選項：

var options = allBindingsAccessor().dateTimePickerOptions || { locale: 'da', format: 'DD-MM-YYYY' }; 
$(element).datetimepicker(options);

然後用這個bindinghandler在HTML標記中：

<div class='input-group date' id='datetimepicker1'> 
    <input type='text' class="form-control" data-bind="dateTimePicker: objVM.fromDate"/> 
    <span class="input-group-addon"> 
     <span class="glyphicon glyphicon-calendar"></span> 
    </span> 
</div>

來源

2015-11-08 06:42:53 ThomasE

Bootstrap 3 Datepicker - Knockout.js

回答

相關問題