AngularJS: получение дат с суффиксом rd, th и st

Как форматировать Date в Angular Java script?

код

<p id="summaryHeader">Calendar of {{dt}}</p>

Я получаю значение как 2014-06-05T12:38:42.744Z

Я пробовал это

<p id="summaryHeader">Calendar of {{dt|date:'MMMM dd'}}</p>

который дает мне

Calendar of June 05

Мне это нужно как Calendar of June 05th или 2 июля и т.д.. rd,th,st - это то, что я ищу.

Anuglar Docs хороши, но не указывайте это форматирование.

Ответы

Ответ 1

Я думаю, это то, что вы ищете - http://www.michaelbromley.co.uk/blog/13/an-ordinal-date-filter-for-angularjs Пользовательский фильтр с использованием логики

app.filter('dateSuffix', function($filter) {
  var suffixes = ["th", "st", "nd", "rd"];
  return function(input) {
    var dtfilter = $filter('date')(input, 'MMMM dd');
    var day = parseInt(dtfilter.slice(-2));
    var relevantDigits = (day < 30) ? day % 20 : day % 30;
    var suffix = (relevantDigits <= 3) ? suffixes[relevantDigits] : suffixes[0];
    return dtfilter+suffix;
  };
});

И демо: http://plnkr.co/edit/HiyQ9uvxQL3FRoj7hKB8?p=preview

Ответ 2

Вы правы, что фильтр даты не предоставляет это форматирование... Я бы предложил вам либо написать собственный фильтр, либо просто сделать это:

Calendar of {{dt|date:'MMMM dd'}}{{getOrdinal(dt)}}

если вы напишете свой собственный, я бы начал с того, что был из angular в качестве базовой линии.

РЕДАКТИРОВАТЬ идея написать свое собственное в ответе гуру - это подход, который я бы принял.

Чтобы расширить пример, который он создал, я бы отредактировал его так, чтобы вы могли использовать этот синтаксис:

Calendar of {{dt|date2:'MMMM ddoo'}}

Где oo - порядковый суффикс

Я обновил этого представителя plnkr, чтобы предоставить вам максимальную гибкость.

Ответ 3

Для всех, кто обращается к этому вопросу, существует проект https://github.com/chrisiconolly/angular-all-ordinal-filters (полное выражение об отказе от ответственности: мой собственный проект), который даст вам порядковый номер фильтр для angular.

Используется так:

{{number | ordinal}} // 1 -> 1st
{{number | ordinalOnly}} // 1 -> st

Он полностью протестирован и работает через travis, чтобы он оставался стабильным.

Ответ 4

Я хотел иметь порядковый индикатор в качестве надстрочного индекса, поэтому использовал следующее:

<div>{{amount}}<sup ng-bind="amount | ordinal"></sup></div>

Использование фильтра:

app.filter('ordinal', function() {
return function(number){
    if (isNaN(number) || number < 1){
        return '';
    } else if (number % 100 == 11 || number % 100 == 12) {
        return 'th';
    } else {
        var lastDigit = number % 10;
        if (lastDigit === 1) {
            return 'st';
        } else if (lastDigit === 2) {
            return 'nd';
        } else if (lastDigit === 3) {
            return 'rd';
        } else if (lastDigit > 3) {
            return 'th';
        }
    }
}
});

Обратите внимание, что это правильно отображает 11 th, 12 th, 111 th, 1012 th, а не 11 й.

Ответ 6

Вы можете перенести свою дату в объект momentjs, например

$scope.dt = moment($scope.dt);

то do

<p id="summaryHeader">Calendar of {{dt.format("ddd Do")}}</p>

Другие варианты могут быть лучше, если вы уже не используете momentjs в другом месте, просто вариант.