Bootstrap 3 日期选择器 - Knockout.js答案

【问题标题】：Bootstrap 3 Datepicker - Knockout.jsBootstrap 3 日期选择器 - Knockout.js
【发布时间】：2015-11-07 16:13:42
【问题描述】：

有没有人成功使用过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();
        }
    }
};

这是我的视图模型：

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>

如果有人有一个好的 datepicker 和 knockout.js 的工作示例，我将非常渴望听到它。

【问题讨论】：

展示你迄今为止的尝试，也许你已经走在正确的轨道上。
我明白你的意思，但问题是我缺少 datepicker 和相应的 knockout.bindinghandler 之间的直接连接。我可以看到视图调用了 bindinghandler，但由于某种原因失败了。
是的，但是要找出原因，我们需要查看代码，您不觉得吗？ ;)
理想的情况是，如果您在问题中的此处构建了一个测试设置（单击“sn-p”按钮），所有库都已就位并正常工作，以便管道不碍事.
欢迎阅读我们最新一期的热门系列“如何通过阅读文档节省一个下午”;-)

标签： twitter-bootstrap knockout.js datepicker

【解决方案1】：

解决方案是使用此处找到的 Bootstrap DatePicker 3 淘汰绑定处理程序：

Bootstrap Datetimepicker installation in Knockout JS

然后在选项中设置语言环境和日期格式：

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

然后在 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>

【讨论】：