Bootstrap datepicker format not working on initialization

Question

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

My question may be of some help stackoverflow.com/questions/25742445/… — camden_kid
– 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
– 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
– camden_kid, Commented Nov 10, 2014 at 20:51

Community · Accepted Answer · 2017-05-23 11:43:42Z

5

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

edited May 23, 2017 at 11:43

CommunityBot

11 silver badge

answered Nov 10, 2014 at 20:45

SzybkiSasza

1,61413 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Bootstrap datepicker format not working on initialization

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related