引导日期选择器的问题

Question

我目前维护的网站使用bootstrap（v3.1.1）和Ace Admin主题（http://ace.jeka.by/），这些网站似乎不再被主动维护。

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

有问题的日期选择器是eyecon的一个，而不是eternicode的。由于前者深深地嵌入了Ace Admin主题中，因此将其交换出来看起来并不重要。 HTML5日期输入不足以支持我使用它。

幸运的是，我几乎就在那里，除了datepicker不遵守我告诉它使用的格式这一事实。

我使用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" />

结果：

Answer 1

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

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

您可以找到可能的选项here

此外，在更新处理程序内部，使用ko.utils.unwrapObservable(valueAccessor())获取将datepicker设置为所需的当前值 -

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了解如何更新它。 （虽然，我在文档中找不到任何这样的方法）

Answer 2

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