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

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 DIRECTIVE:

.directive('translateDateObject', function($timeout) {
return {
    controller: function ($scope) {
        return {};
    },
    requires: 'translateDateObject',
    link: function(scope, element, attrs, thisController) {
        var rawHtmlContainer = angular.element('<div></div>');
        $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 TO 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;  
                }
            }
        });
    }
}
});

THE VIEW:

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

AngularJs: How to translate a date object?

Sign up