Клиентский перевод дат javascript с угловым

Question

Я использую AngularJS. Допустим, у меня есть дата 16 августа 2015 года, и я хочу отформатировать ее на экране с форматом «dd MMM yyy», так что отобразится 16 Aug 2015.

Это легко использовать фильтр даты.

Теперь я хочу, чтобы переключить язык на лету на испанский, так что текст теперь говорит 16 Ago 2015

Как я могу это сделать? Я использую angular-translate, но я не вижу, как подключить его с фильтром даты. Должен ли я писать свою собственную директиву, которая выделяет день, месяц и год отдельно, чтобы я мог применить директиву углового перевода для части месяца?

Answer 1

вы должны написать прототип, подобный этому.

Date.prototype.yyyymmdd = функция() {

 var yyyy = this.getFullYear().toString(); 

     var mm = (this.getMonth()+1).toString(); // getMonth() is zero-based 
     var dd = this.getDate().toString(); 

     return yyyy +"-"+ (mm[1]?mm:"0"+mm[0]) +"-"+ (dd[1]?dd:"0"+dd[0]); // padding 

     }; 

здесь когда вы звоните

вар дт = новый Date();

dt.yyyymmdd();

он предоставит вам формат месяца в месяц в течение месяца, когда вы можете изменить все, что захотите.

Удачи.

Answer 2

Попробуйте так:

app.filter('dateLocalized', [function(){ 
    return function(date, lang){ 
     var year = date.getFullYear(); 
     var day = date.getDate(); 
     var month = { 
      en: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'], 
      es: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sept', 'Oct', 'Nov', 'Dic'] 
     }[lang][date.getMonth()]; 
     return [day, month, year].join(' '); 
    }; 
}]); 

В HTML:

<div ng-bind="date | dateLocalized: lang"></div> 

lang будет en или es.

Answer 3

Sugar.js позволяет установить локаль на лету:

date.setLocale('es')

После того, как вы установите локаль, то достаточно просто позвонить date.toLocaleString().

Answer 4

Я принял ответ от karaxuna, но сделал несколько корректировок. Во-первых, я использовал директиву, а не фильтр, хотя я не понимаю, почему фильтр не работает. Однако в моем случае были и другие сложности, с которыми я не хотел оспаривать вопрос, что заставило меня хотеть дополнительную власть, которую могут дать директивы.

Второе отличие заключается в том, что я не реализовал свою собственную поддержку форматирования/языка - я использовал momentJs, который делает оба из коробки.

Вот сокращенная фрагмент кода (в машинописном):

interface ValueformatterScope extends ng.IScope { 
    value: string; 
    dataType: string; 
    i18nService: I18nService; 
} 

class ValueFormatter { 
    constructor(i18nService: I18nService) { 
     return { 
      restrict: 'AC',  // Only apply on an attribute or class 
      scope: { 
       value: '=ngModel', // The two-way data bound value that is returned by the directive 
       dataType: '=dataType', 
      }, 
      link: (scope: ValueformatterScope, element: JQuery) => { 

       function render() { 
        var formattedText: string; 

        if (scope.value == null || scope.value === '') { 
         formattedText = ""; 
        } 
        else if (scope.value == '-') { 
         formattedText = '-'; 
        } 

        else if (scope.dataType == 'DATE') { 
         //dates should be shown in GMT (i.e., not converted to local timezone from DB) 
         var dateUtc = Util.getUtcDate(scope.value); 
         formattedText = moment(dateUtc).format(i18nService.locale.dateFormat); 
        } 

        element.text(formattedText); 
       } 

       scope.i18nService = i18nService; 

       scope.$watch("i18nService.locale",() => { 
        render(); 
       }); 

       scope.$watch('value',() => { 
        render(); 
       }); 
      } 
     } 
    } 
} 

Когда пользователь включает локаль, я просто называю moment.locale(newLocale), а затем обновить значение i18nService.locale, который запускает $watch