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

时间:2013-02-05 13:55:34

标签: javascript twitter-bootstrap knockout.js coffeescript

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

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

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

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

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

2 个答案:

答案 0 :(得分:1)

以下是datePickerdateValue绑定的working jsfiddlegist,它们独立绑定到可观察对象并相应地更新。

<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)方法。

答案 1 :(得分:0)

为什么不使用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
});
}