Change date format for ui datepicker (jHipster)

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.

Maybe your `dateformat` is not set properly. I suppose that is done in the controller somehow. — neptune, Jun 08 '17 at 11:17

score 1 · Answer 1 · answered Jun 08 '17 at 13:29

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 ;)

Change date format for ui datepicker (jHipster)

1 Answers1