引导日期选择器的问题答案

【问题标题】：Issue with bootstrap datepicker引导日期选择器的问题
【发布时间】：2017-03-28 09:11:43
【问题描述】：

我目前维护的一个站点使用 bootstrap (v3.1.1) 和 Ace Admin 主题 (http://ace.jeka.by/)，似乎不再积极维护。

我也在使用 Knockout，并且很难在表单上获取日期选择器以尊重我希望它使用的格式。这里有很多关于让 Knockout 与 BS 日期选择器完美配合的问题。

有问题的日期选择器是 eyecon 的，而不是 eternicode 的。由于前者深深嵌入 Ace Admin 主题中，因此将其换掉看起来并不简单。 HTML5 日期输入没有得到足够广泛的支持，我无法使用它。

幸运的是，我几乎可以使用它，除了日期选择器不遵守我告诉它使用的格式这一事实。

我使用 KO 绑定如下：

JS：

ko.bindingHandlers.datepicker = {
        init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
            // Register change callbacks to update the model if the control changes.
            ko.utils.registerEventHandler(element,
                "change",
                function() {
                    var value = valueAccessor();
                    value(moment(element.value).format("DD/MM/YYYY"));
                });
        },
        // Update the control whenever the view model changes
        update: function(element, valueAccessor, allBindingsAccessor, viewModel) {
            var value = valueAccessor();
            element.value = moment(value()).format("DD/MM/YYYY");
        }
    };

HTML：

 <input class="datepicker form-control" data-bind="datepicker: BirthDetails().DateOfBirth, value: BirthDetails().DateOfBirth, dateFormat: 'dd/mm/yyyy'" data-date-format="dd/mm/yyyy" id="dateOfBirth" name="dateOfBirth" placeholder="dd/mm/yyyy" type="text" />

结果：

【问题讨论】：

我不确定它在这里会有多大用处，但你知道knockstrap吗？它旨在弥合淘汰赛和引导式之间的差距 - 在某些情况下非常有用。
在访问 valueAccessor 之前尝试 ko.unwrapObservable... 是的，knockstrap 是一个值得一看的库...
@gkb 您对使用 unwrapObservable 的建议会导致 KO 出现以下内容： ex.message = "Unable to process binding \"" + bindingKey + ": " + bindings[bindingKey] + "\ "\n消息：" + ex.message;
@noonand - 你有小提琴要看看吗？
这就是为什么我说“我不确定它在这里会有多大用处” - 但将来如果你同时使用两者可能会。

标签： javascript twitter-bootstrap knockout.js datepicker

【解决方案1】：

查看Bootstrap's date-picker 的演示，我认为您应该指定您想要的格式作为选项，然后构建如下所示的日期选择器 -

init: function(element, valueAccessor, allBindingsAccessor, viewModel) {    
  $(element).datepicker({
    autoclose: true,
    format: "dd-mm-yyyy"
  });
}

您可以找到可能的选项here

此外，在更新处理程序内部，使用ko.utils.unwrapObservable(valueAccessor()) 获取您需要将日期选择器设置为这样的当前值 -

var value = ko.utils.unwrapObservable(valueAccessor()); 
// format it (using moment like you are currently doing)
// set the datepicker to the formatted value
$(element).datepicker("update", value);

reference 了解如何更新它。（虽然，我在文档中找不到任何这样的方法）

【讨论】：

【解决方案2】：

问题出在 HTML 中，在 data-bind 指令中我有 text 和 datepicker 属性。在调试时，似乎一个在与另一个竞争，所以我删除了 text 一个，一切都很好。

【讨论】：