Question

在我目前的项目中，我使用Bootstrap日期选择器来允许用户选择日期。

有一个请求允许人们在datePicker输入中输入日期，而不必手动点击小部件中的日期。

目前，当用户手动编辑日期字符串时，日期选择器将突出显示正确的日期，但不会更新分配给它的变量。（作为注释我使用Knockout.js并使用observable存储日期）

我的想法是，这只会触发changeDate函数，但事实并非如此。

有没有人试图实现这一目标并让它发挥作用？

Answer 1

以下是datePicker和dateValue绑定的working jsfiddle和gist，它们独立绑定到可观察对象并相应地更新。

<div class="input-append date">
    <input type="text" data-bind="dateValue: date" />
    <span class="add-on datepicker-button" data-bind="datePicker: { date: date }">
        <i class="icon-calendar"></i>
    </span>
</div>

绑定是用BindingHandlerFactory包装写的 1.为每个绑定的元素创建一个处理程序对象，并将其与$.data()一起存储在元素上 2.一次调用处理程序的initialize(element, context) 3.每次绑定上下文更改时调用处理程序的contextChanged(context)方法。

Answer 2

为什么不使用KO的读/写选项。

类似

function yourModel(){
var self = this;
self.theDateUserManuallyWillEnter = ko.computed({
read: function () {
    if (self.theDateUserManuallyWillEnter != undefined)
        return self.theDateUserManuallyWillEnter ;
    else
        return $('#theDateUserManuallyWillEnteredTextBox').val(); //Jquery      
                                 identifier of text box
},
write: function (value) {
    self.theDateUserManuallyWillEnter = value;
},
owner: this
});
}

Bootstrap DatePicker允许通过键入进行编辑

2 个答案: