引导日期选择器格式在初始化时不起作用答案

【问题标题】：Bootstrap datepicker format not working on initialization引导日期选择器格式在初始化时不起作用
【发布时间】：2014-10-29 15:26:05
【问题描述】：

我正在尝试在我的应用程序中使用 angular-bootstrap datepicker 模块，但遇到了小问题。我使用输入文本和按钮来显示日期，如下所示：

<div class="row" id="datePicker">
    <p class="input-group">
        <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="currentDate" 
        is-open="opened" datepicker-options="dateOptions" date-disabled="disableDt(date, mode)" 
        ng-required="true" close-text="Close" show-button-bar="false" ng-init="" readonly/>
        <span class="input-group-btn">
            <button type="button" class="btn btn-default" ng-click="open($event)">
                <i class="glyphicon glyphicon-calendar"></i>
            </button> 
        </span>
    </p>
</div>

而且由于使用 angular 谷歌地图，我必须手动引导我的应用程序。似乎由于手动引导，日期选择器无法正确格式化日期并显示整个未格式化的日期。当我从 datepicker 中选择任何日期时，日期会正确显示在输入字段中。更重要的是，模型更改不会强制格式更改（例如，最初我从 json 文件中获取了一些日期，它们显示在字段中，但也没有格式化）。下面的例子：

初始日期：2014 年 1 月 17 日星期五 01:00:00 GMT+0100 (CET)
预计日期（选择同一天后显示一个）：2014 年 1 月 17 日

有没有什么办法可以刷新这个小部件，让它在开始时知道正确的格式，或者在适当的时候改变它以正确初始化？

编辑：当我将 datepicker 移动到片段时，它不应该有未初始化模型的问题（此片段稍后加载）。尽管如此，问题还是出现了 - 日期未格式化，并且似乎根本没有与格式化程序或模型连接（例如，在 datepicker 中选择日期之前，制作格式下拉菜单并选择教程中的不同值不起作用）。

EDIT 2 来自 camden_kid 提供的链接的解决方案有效！ :) 他的评论中有详细信息。

【问题讨论】：

我的问题可能会有所帮助stackoverflow.com/questions/25742445/…
谢谢，该问题的解决方案之一奏效了！ :) 准确地说 - 我决定在初始化变量时手动格式化变量。
很高兴能提供帮助。您可能想要对问题和答案进行投票。干杯。

标签： javascript angularjs datepicker angular-ui angular-ui-bootstrap

【解决方案1】：

可以在这里找到答案： AngularJS 1.3 - Datepicker initial format is incorrect

我在初始化时手动格式化日期如下：

$scope.currentDate = $filter('date')(new Date(), $scope.format);

但是，更好的解决方案是重载指令如下（取自原始链接）：

angular.module('myApp').directive('datepickerPopup', function (dateFilter, datepickerPopupConfig) {
return {
    restrict: 'A',
    priority: 1,
    require: 'ngModel',
    link: function(scope, element, attr, ngModel) {
        var dateFormat = attr.datepickerPopup || datepickerPopupConfig.datepickerPopup;
        ngModel.$formatters.push(function (value) {
            return dateFilter(value, dateFormat);
        });
    }
};

});

当日期被日期选择器更改后，日期选择器本身会处理任何日期格式:)

感谢@camden_kid提供链接！ :)

【讨论】：