问题与引导日期选择器

问题描述：

我目前维护的网站使用bootstrap（v3.1.1）和Ace Admin主题（http://ace.jeka.by/），该主题似乎不再被主动维护。问题与引导日期选择器

我也在使用Knockout，并且很难在窗体上获得一个datepicker来尊重我希望它使用的格式。这里有很多关于如何让Knockout和BS datepicker一起玩的问题。

问题日期选择器是eyecon的一个，而不是eternicode的。由于前者深深嵌入Ace管理主题中，因此将其换出看起来并不复杂。对于我来说，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" />

结果：

我不确定这里会有多大的用处，但是你知道[knockstrap]（https://faulknercs.github.io/Knockstrap/）吗？它旨在弥合淘汰赛和引导之间的差距 - 在某些情况下非常有用。 –

在访问'valueAccessor'前试试'ko.unwrapObservable' ...是的，knockstrap是一个值得一看的库... – gkb

@gkb你使用unwrapObservable的建议会导致KO去掉一行：ex.message = “无法处理结合\” “+的bindingKey + ”：“ +绑定[的bindingKey] + ”\“ \ n消息：” + ex.message; – noonand

答

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

答

望着演示了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如何更新它。（不过，我无法找到的文档中找到这样的方法）

问题与引导日期选择器

相关推荐