Bootstrap loading date format not working on initialization
I am trying to use the angular-bootstrap datepicker module in my application and ran into a little problem. I am using an input text and a button to display the 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 load my app. It looks like due to manual bootstrapping the datepicker is unable to format the date correctly and displays the whole unformatted date. When I select any date from the datepicker, the date is displayed correctly in the input field. Moreover, changes to the model do not lead to a change in the format (for example, initially I received several dates from a json file, and they were displayed in the field, but without formatting too). See example below:
- Start date: Fri 17 January 2014 01:00:00 GMT + 0100 (CET)
- Expected date (and one displayed after selection on the same day): January 17, 2014
Is there a way to update this widget so that it knows the correct formatting at the start, or changes it at the right time to initialize correctly?
The EDIT: . When I moved the datepicker to the snippet, it should have no problem with the uninitialized model (this snippet will be loaded later). However, the problem arises - the date is not formatted and does not seem to be related to the format or model at all (for example, the dropdown format format and selection of different values as in the tutorial does not work until the date is selected inside the datepicker).
EDIT 2 The solution from the link provided by camden_kid worked! :) Details in his comment.
source to share
The answer can be found here: AngularJS 1.3 - The original Datepicker format is incorrect
I have manually formatted the init date like below:
$scope.currentDate = $filter('date')(new Date(), $scope.format);
However, the best solution would be to overload the directive like this (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 the date was changed by the datepicker afterwards, the datepicker handled any date formatting itself :)
Thanks to @camden_kid for providing the link! :)
source to share