javascript - Bootstrap datepicker format not working on initialization -
javascript - Bootstrap datepicker format not working on initialization -
i trying utilize angular-bootstrap datepicker module in app , encountered little problem. utilize input text , button displaying date 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 using angular google maps have manually bootstrap app. seems due manual bootstrapping, datepicker unable format date , displays whole unformatted date. take date datepicker, date displayed correctly in input field. more, model changes don't forcefulness format alter (e.g. got dates json file , displayed in field, without formatting too). illustration below:
initial date: fri jan 17 2014 01:00:00 gmt+0100 (cet) expected date (and 1 displayed after choosing same day): 17 jan 2014is there way of refreshing widget knows proper formatting @ origin or changing @ proper moment initialize properly?
edit: moved datepicker fragment, should not have problems not initialized model (this fragment loaded later). still, problem occur - date not formatted , seems not connected formatter or model @ (e.g. making format dropdown , choosing different values in tutorial doesn't work until date chosen within datepicker).
edit 2 solution link provided camden_kid worked! :) details in comment.
answer found here: angularjs 1.3 - datepicker initial format incorrect
i manually formatted date on initialization below:
$scope.currentdate = $filter('date')(new date(), $scope.format);
however, improve solution overload directive follows (taken original link):
angular.module('myapp').directive('datepickerpopup', function (datefilter, datepickerpopupconfig) { homecoming { restrict: 'a', priority: 1, require: 'ngmodel', link: function(scope, element, attr, ngmodel) { var dateformat = attr.datepickerpopup || datepickerpopupconfig.datepickerpopup; ngmodel.$formatters.push(function (value) { homecoming datefilter(value, dateformat); }); } };
});
when date changed datepicker afterwards, datepicker handled date formatting :)
thanks @camden_kid providing link! :)
javascript angularjs datepicker angular-ui angular-ui-bootstrap
Comments
Post a Comment