javascript - 引导 DatePicker 以允许通过键入进行编辑

Question

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

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

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

我的想法是，这只会触发 changeDate 函数，但不会。

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

Answer 1

这是一个有效的 jsfiddle和and绑定的要点，它们独立地绑定到一个可观察对象并相应地更新它。datePickerdateValue

<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.调用handler的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
});
}