Change date format for ui datepicker (jHipster) - angularjs

Question

I've generated a Spring Boot + Angular 1 based project in jHipster. I'm kind of newbie the Angular world. Everything works fine, but when I input the date using the provided UI datepicker (https://angular-ui.github.io/bootstrap), its format is yyyy-MM-dd, even if I've defined spanish to be my only language package (I would prefer it to be dd/MM/yyyy). That's the code snippet for the input:
regulation-version-dialog.html
<div class="form-group">
<label class="control-label"
data-translate="selfprotectionApp.regulationVersion.versionDate"
for="field_versionDate">Version Date</label>
<div class="input-group">
<input id="field_versionDate" type="text" class="form-control"
name="versionDate" uib-datepicker-popup="{{dateformat}}"
ng-model="vm.regulationVersion.versionDate"
is-open="vm.datePickerOpenStatus.versionDate" /> <span
class="input-group-btn">
<button type="button" class="btn btn-default"
ng-click="vm.openCalendar('versionDate')">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</div>
</div>
Here there's the {{dateformat}} binding, but I don't know where jHipster picks it from. The only matches are in the date-util.service.js file, but changing the format here doesn't seem to affect.
date-util.service.js
(function() {
'use strict';
angular
.module('selfprotectionApp')
.factory('DateUtils', DateUtils);
DateUtils.$inject = ['$filter'];
function DateUtils($filter) {
var service = {
convertDateTimeFromServer: convertDateTimeFromServer,
convertLocalDateFromServer: convertLocalDateFromServer,
convertLocalDateToServer: convertLocalDateToServer,
dateformat: dateformat
};
return service;
function convertDateTimeFromServer(date) {
if (date) {
return new Date(date);
} else {
return null;
}
}
function convertLocalDateFromServer(date) {
if (date) {
var dateString = date.split('-');
return new Date(dateString[0], dateString[1] - 1, dateString[2]);
}
return null;
}
function convertLocalDateToServer(date) {
if (date) {
return $filter('date')(date, 'yyyy-MM-dd');
} else {
return null;
}
}
function dateformat() {
return 'yyyy-MM-dd';
}
}
})();
Of course, I could replace the {{dateformat}} expression by some date format in HTML, but I would like to do it for the whole project.

Answer 1

There is no default way in angular JS to set up dateformat from a provider for example for the complete project.
What you could do; is define a filter with your format to be used like that : {{dateformat | date:'MM/dd/yyyy'}}
OR define a global filter for that requirement to make it more easy to type (source https://stackoverflow.com/a/18402623/3687474 )
.filter('myDate', function($filter) {
var angularDateFilter = $filter('date');
return function(theDate) {
return angularDateFilter(theDate, 'dd MMMM # HH:mm:ss');
}
});
and used it like that : {{dateformat | myDate }}
The ultimate solution is to used a very robust library to manage your dates such as moment.js and it angularjs diretives
this is my favorite solution; as it is more scalable for many uses and date manipulation.
However; adding libraries to your project has always a performance cost ;)