javascript – Bootstrap datepicker格式不能用于初始化

我试图在我的应用程序中使用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>

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

>开始日期：2014年1月17日星期五01:00:00 GMT 0100(CET)
>预计日期(选择同一天后显示的日期)：2014年1月17日

是否有任何方法可以刷新此窗口小部件,以便它在开始时知道正确的格式或在适当的时刻更改它以正确初始化？

编辑：当我将datepicker移动到片段时,它应该没有初始化模型的问题(此片段稍后加载).仍然出现问题 – 日期没有格式化,似乎根本没有与格式化程序或模型连接(例如,制作格式下拉列表并选择不同的值,因为教程在日期选择器中选择日期之前不起作用).

编辑2解决方案从camden_kid提供的链接工作！ :)详细评论.

解决方法:

答案可以在这里找到：
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);
        });
    }
};

});

当datepicker之后更改日期时,datepicker本身处理任何日期格式:)

感谢@camden_kid提供的链接！

标签：javascript,angularjs,datepicker,angular-ui-bootstrap,angular-ui
来源： https://codeday.me/bug/20190830/1767703.html