Bootstrap datepicker格式不能用于初始化

I am trying to use angular-bootstrap datepicker module in my app and encountered small problem. I use input text and button for displaying date like this:

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

And due to using angular google maps I have to manually bootstrap my app. It seems that due to manual bootstrapping, datepicker is unable to properly format the date and displays whole unformatted date. As I choose any date from datepicker, date is then displayed correctly in the input field. What is more, model changes don't force format to change (e.g. initially I got some dates from json file and they were displayed in the field, but without formatting too). Example below:

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

Initial date: Fri Jan 17 2014 01:00:00 GMT+0100 (CET)

开始日期:2014年1月17日星期五01:00:00 GMT + 0100(CET)

Expected date (and one displayed after choosing the same day): 17 January 2014

预计日期(选择同一天后显示的日期):2014年1月17日

Is there any way of refreshing this widget so it knows proper formatting at the beginning or changing it at the proper moment to initialize properly?

有没有办法刷新这个小部件,以便它在开始时知道正确的格式或在适当的时刻更改它以正确初始化?

EDIT: As I moved datepicker to fragment, it should not have problems with not initialized model (this fragment is loaded later). Still, problem occur - date is not formatted and seems not to be connected with formatter or model at all (e.g. making format dropdown and choosing different values as in tutorial doesn't work until date is chosen inside datepicker).

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

EDIT 2 Solution from the link provided by camden_kid worked! :) Details in his comment.

编辑2解决方案来自camden_kid提供的链接工作! :)详细评论。

1 个解决方案

#1

Answer could be found here: AngularJS 1.3 - Datepicker initial format is incorrect

答案可以在这里找到:AngularJS 1.3 - Datepicker初始格式不正确

I manually formatted the date on initialization as below:

我在初始化时手动格式化了日期,如下所示:

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

However, better solution would be to overload directive as follows (taken from the original link):

但是,更好的解决方案是如下重载指令(取自原始链接):

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);
        });
    }
};

});

When date was changed by datepicker afterwards, datepicker itself handled any date formatting :)

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

Thanks to @camden_kid for providing the link! :)

感谢@camden_kid提供链接! :)

#1