引导日期选择器的问题

Posted 2023-05-07

【中文标题】引导日期选择器的问题

【英文标题】：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 - 你有小提琴要看看吗？

这就是为什么我说“我不确定它在这里会有多大用处” - 但将来如果你同时使用两者可能会。

【参考方案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 一个，一切都很好。