UI Bootstrap Datepicker Popup date format
Solution 1
After some research, I think I was looking for a directive to add custom parser and formatter :
.directive('dateFormatter', [
function () {
return {
restrict: 'A',
require: 'ngModel',
link: function postLink(scope, element, attrs, ngModel) {
ngModel.$parsers.push(function(data) {
return moment(data).format('DD/MM/YYYY');
});
ngModel.$formatters.push(function(data) {
return moment(data, 'DD/MM/YYYY').toDate()
});
}
};
}
]);
Updated plunkr: https://plnkr.co/edit/oi1EtcDmzpzyyKmXvhqz?p=preview
Solution 2
UI Bootstrap datepicker exposes the date parser it uses internally as a service. Inject the uibDateParser
service into your controller and use the parse function to wrangle your dates into the correct format:
function ($scope, uibDateParser) {
$scope.today = function() {
$scope.dt = uibDateParser.parse('02/01/2017', 'dd/MM/yyyy');
};
...
}
https://plnkr.co/edit/u5GRT5QOjdT61zZ36fmE?p=preview
jaudo
Updated on June 18, 2022Comments
-
jaudo almost 2 years
I'm using a UI Bootstrap Datepicker Popup, and I would like to use a custom date format. My rest service sends me dates with 'dd/MM/yyyy' format. I want to use this format but it when changing the model value, the date picker is not update. I defined
uib-datepicker-popup="dd/MM/yyyy"
but does not seem to work.Plunker : https://plnkr.co/edit/SfSXmeL0ue0yef1yTKMO?p=preview
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']); angular.module('ui.bootstrap.demo').controller('DatepickerPopupDemoCtrl', function ($scope) { $scope.today = function() { $scope.dt = '02/01/2017'; }; $scope.clear = function() { $scope.dt = null; }; $scope.dateOptions = { formatYear: 'yy', startingDay: 1 }; $scope.open1 = function() { $scope.popup1.opened = true; }; $scope.popup1 = { opened: false }; });
<!doctype html> <html ng-app="ui.bootstrap.demo"> <head> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script> <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script> <script src="example.js"></script> <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <style> .full button span { background-color: limegreen; border-radius: 32px; color: black; } .partially button span { background-color: orange; border-radius: 32px; color: black; } </style> <div ng-controller="DatepickerPopupDemoCtrl"> <pre>Selected date is: <em>{{dt | date:'fullDate' }}</em></pre> <h4>Popup</h4> <div class="row"> <div class="col-md-6"> <p class="input-group"> <input type="text" class="form-control" uib-datepicker-popup="dd/MM/yyyy" ng-model="dt" is-open="popup1.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" /> <span class="input-group-btn"> <button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button> </span> </p> </div> </div> <hr /> <button type="button" class="btn btn-sm btn-info" ng-click="today()">Today</button> </div> </body> </html>
On the plunker: - Click "today", makes
$scope.dt = '02/01/2017'
- Open the date picker popup, it initialized on February the 1st instead of January the 2nd -
jaudo almost 7 yearsIn fact, I'm receiving this date through a rest service, so I don't want to make a new Date(). My data looks like {begin:"01/02/2017",end:"02/02/2017"}
-
jaudo almost 7 yearsI was looking for a way to tell the datepicker which format it should use to parse dates. Isn't that possible?
-
Pop-A-Stash almost 7 yearsActually that is possible...github.com/angular-ui/bootstrap/tree/master/src/dateparser
-
jaudo almost 7 yearsParsing in my model doesn't look like a good solution to me. If my dto contains a lot of dates, I will need to parse all of them individually. I think I found a better solution using a directive (see my accepted answer).