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:

<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:

• Initial date: Fri Jan 17 2014 01:00:00 GMT+0100 (CET)
• Expected date (and one displayed after choosing the same day): 17 January 2014

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).

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

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:

<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:

• Initial date: Fri Jan 17 2014 01:00:00 GMT+0100 (CET)
• Expected date (and one displayed after choosing the same day): 17 January 2014

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).

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

• javascript
• angularjs
• datepicker
• angular-ui
• angular-ui-bootstrap

• My question may be of some help stackoverflow./questions/25742445/… – camden_kid Commented Nov 10, 2014 at 20:27
• Thanks, one of the solution from that question worked! :) To be precise - I decided to manually format variable when initializing it. – SzybkiSasza Commented Nov 10, 2014 at 20:40
• Glad to be of help. You may want to upvote the question and answer. Cheers. – camden_kid Commented Nov 10, 2014 at 20:51

1 Answer 1

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

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 :)

Thanks to @camden_kid for providing the link! :)