如何使用Knockout JS计算两个日期?

时间:2014-05-25 17:06:36

标签: javascript knockout.js

我正在尝试使用Knockout computed在我更改它们时连接两个日期 从示例中,我似乎不需要使用valueUpdate: 'input'。但是当我更改日期时(使用Bootstrap datepicker)没有任何事情发生。对我缺少的任何想法?

Here's my fiddle.

我的代码:

<div class="input-append date">
    <input type="text" data-bind="value: fromDate, valueUpdate: 'input'" class="date from-date" /> 
    <span class="add-on">to</span>
    <input type="text" data-bind="value: toDate, valueUpdate: 'input'" class="date to-date" />
</div>
Dato: <span class="date" data-bind="date"></span>


function dateModel() {
    var self = this;
    self.fromDate = ko.observable('12.09.2014');
    self.toDate = ko.observable();

    self.validPeriod = ko.computed(function () {
        return self.fromDate + " - " + self.toDate;
    }, self);
}

ko.applyBindings(dateModel());

1 个答案:

答案 0 :(得分:2)

由于日期选择器对象的类型为koObservable,因此您需要将对象视为函数,因此validPeriod函数应如下所示:

self.validPeriod = ko.computed(function () {
    return self.fromDate() + " - " + self.toDate();
}, self);

Knockout.js documentation for observables州:

  

要读取observable的当前值,只需调用observable即可   没有参数。在此示例中,myViewModel.personName()将返回   'Bob'和myViewModel.personAge()将返回123。

然后我建议使用日期范围元素的text数据绑定来调用计算函数:

<span class="date" data-bind="text: validPeriod"></span>

感谢@Buck Doyle的评论和一些研究,似乎Knockout.js需要特殊的处理日期时间选择器控件,如this SO post - jQuery UI datetimepicker and Knockout.js所示 - 一个可能的解决方案问题是为KOjs实现自定义日期时间选择器处理。

This page - custom bindings with KOjs非常好(例如)如何bind the datetime picker control