AngularJs: How to translate a date object?

Question

THE SITUATION:

I am using angular-translate for my app and it is working perfectly.

The only thing missing is to translate the date object. In the app there is an agenda that display also the name of the days ('EEEE').

These names are english and i don't find out how can I translate them in other languages.

THE CODE:

This is the simple view displaying the date object in the 'EEEE':

<span class="day">{{ day | date : 'EEEE'}}</span>

The result is something like

Wednesday - Thursday - etc..

This an example of how I am using angular-translate in other parts of the app:

<span class="input-label" ng-bind-html="'EMAIL' | translate"></span>
<span class="input-label" ng-bind-html="'PASSWORD' | translate"></span>

THE QUESTION:

How can i translate a date object?

There is a simple way to do it?

Thank you very much!

Answer 1

You can use moment.js with translations. There is also angular version.

First you need to add files to html file:

<script src="moment/moment.js"></script>
<script src="moment/locale/fr.js"></script>
<script src="moment/locale/de.js"></script>
<script src="angular-moment.js"></script>

Then you would need to config the locale:

angular.module('core', ['angularMoment']).config(config);

config.$inject = ['moment'];

function config(moment) {
    moment.changeLocale('fr');
}

Then you're able to use angular-moment:

<span>{{day |amDateFormat:'dddd'}}</span>

Answer 2

Angular has a module called ngLocale (click link for source code).

If you provide the relevant locale file, it will automatically translate a whole host of things in the built in Angular filters, such as date, currency, times etc.

I use angular-translate combined with tmhDynamicLocale.

I configure the dynamic locale with this block:

function appConfigBlock(tmhDynamicLocaleProvider) {
  //this needs to point to wherever you put angulars locale files.
  tmhDynamicLocaleProvider.localeLocationPattern('common/thirdparty/locale/angular-locale-{{locale}}.js');
}

and detect the changes with this block

function appRunBlock($rootScope, tmhDynamicLocale, $translate){
  $rootScope.$on('$translateChangeSuccess', function () {
    tmhDynamicLocale.set($translate.use());
  });
}

Answer 3

I have tried angular-moment. There are many awesome formats for date but didn't find how to actually translate the date format 'EEEE'. I have looked two days into possible solutions but didn't find any actual one.

I needed a fast solution so i made a directive. It is a cumbersome solution but at least for now is working. Looking forward for better solutions.

If you have any i will check your answer as correct.

Here is the code with commentary:

THE VIEW:

<div translate-date-object>
    <span class="day">{{ day | date : 'EEEE'}}</span>
</div>

THE DIRECTIVE:

.directive('translateDateObject', function($timeout) {
return {
    controller: function ($scope) {
        return {};
    },
    requires: 'translateDateObject',
    link: function(scope, element, attrs, thisController) {

        $timeout(function() {

            thisController.html = element[0].innerHTML;

            // CLEAN THE STRING TO GET A CLEAN NAME DAY
            var content_temp1 = thisController.html.replace('<span class="day ng-binding">','');
            var content_temp2 = content_temp1.replace('</span>','').toLowerCase();

            var day_name = '';

            for (var i = 0, len = content_temp2.length; i < len; i++) 
            {
                // CHECK IF IS A CHAR
                if (content_temp2[i].match(/[a-z]/i)) 
                {
                    day_name += content_temp2[i];
                }
            }

            // CHECK THE ACTIVE LANGUAGE
            if (localStorage['language_code'] == 'tr') 
            {
                // ASSIGN A DIFFERENT TRANSLATION FOR EACH DAY
                switch(day_name) 
                {
                    case 'monday':
                        element.html('<span class="day">Pazartesi</span>');
                    break;
                    case 'tuesday':
                        element.html('<span class="day">Salı</span>');
                    break;
                    case 'wednesday':
                        element.html('<span class="day">Çarsamba</span>');
                    break;
                    case 'thursday':
                        element.html('<span class="day">Persembe</span>');
                    break;
                    case 'friday':
                        element.html('<span class="day">Cuma</span>');
                    break;
                    case 'saturday':
                        element.html('<span class="day">Cumartesi</span>');
                    break;
                    case 'sunday':
                        element.html('<span class="day">Pazar</span>');
                    break;  
                }
            }
        });
    }
}
});

Answer 4

You can do it with (for french for example):

<span>{{date.toLocaleDateString("fr-FR",{weekday: "long"})}}</span>