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