AngularJs：如何翻译日期对象？

THE SITUATION:

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

我正在为我的应用程序使用angular-translate,它工作得很好。

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').

唯一缺少的是翻译日期对象。在应用程序中有一个议程,也显示日期的名称('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':

这是在'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:

这是一个如何在应用程序的其他部分使用angular-translate的示例:

<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!

非常感谢你!

4 个解决方案

#1

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

您可以将moment.js与翻译结合使用。还有角度版本。

First you need to add files to html file:

首先,您需要将文件添加到html文件:

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

#2

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

Angular有一个名为ngLocale的模块(单击源代码链接)。

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.

如果您提供相关的区域设置文件,它将自动翻译内置Angular过滤器中的所有内容,例如日期,货币,时间等。

I use angular-translate combined with tmhDynamicLocale.

我使用angular-translate和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());
  });
}

#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.

我尝试了角度瞬间。有许多令人敬畏的日期格式,但没有找到如何实际翻译日期格式'EEEE'。我已经看了两天可能的解决方案,但没有找到任何实际的解决方案。

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

#4

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

您可以使用(例如法语):

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

#1