I am currently incorporating the angular-bootstrap datepicker module into my app and have run into a minor issue. I am using an input text field and a button to display the date in the following manner:
<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>
With the use of angular google maps, I need to manually bootstrap my app. It appears that due to manual bootstrapping, the datepicker is unable to correctly format the date initially and displays the entire unformatted date. However, once a date is selected from the datepicker, it is displayed correctly in the input field. Additionally, changes in model do not automatically update the formatting (for example, dates retrieved from a JSON file are displayed without proper formatting).
- Initial date: Fri Jan 17 2014 01:00:00 GMT+0100 (CET)
- Expected date (and what is displayed after selecting the same day): 17 January 2014
Is there a way to refresh this widget so it recognizes the correct formatting from the beginning or to modify it at the appropriate moment for proper initialization?
EDIT: Even after moving the datepicker to a fragment to avoid issues with uninitialized models (loaded later), the problem persists - the date remains unformatted and does not seem to be linked to the formatter or model at all (changes made to the format dropdown do not take effect until a date is selected within the datepicker).
EDIT 2: The solution mentioned by camden_kid's link has successfully resolved the issue! :) More details can be found in their comment.