Как форматировать 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 хороши, но не указывайте это форматирование.
Я думаю, это то, что вы ищете - 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;
};
});
Вы правы, что фильтр даты не предоставляет это форматирование... Я бы предложил вам либо написать собственный фильтр, либо просто сделать это:
Calendar of {{dt|date:'MMMM dd'}}{{getOrdinal(dt)}}
если вы напишете свой собственный, я бы начал с того, что был из angular в качестве базовой линии.
РЕДАКТИРОВАТЬ идея написать свое собственное в ответе гуру - это подход, который я бы принял.
Чтобы расширить пример, который он создал, я бы отредактировал его так, чтобы вы могли использовать этот синтаксис:
Calendar of {{dt|date2:'MMMM ddoo'}}
Где oo - порядковый суффикс
Я обновил этого представителя plnkr, чтобы предоставить вам максимальную гибкость.
Для всех, кто обращается к этому вопросу, существует проект https://github.com/chrisiconolly/angular-all-ordinal-filters (полное выражение об отказе от ответственности: мой собственный проект), который даст вам порядковый номер фильтр для angular.
Используется так:
{{number | ordinal}} // 1 -> 1st
{{number | ordinalOnly}} // 1 -> st
Он полностью протестирован и работает через travis, чтобы он оставался стабильным.
Я хотел иметь порядковый индикатор в качестве надстрочного индекса, поэтому использовал следующее:
<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 й.
В то время как моя самая лучшая работа, вы можете начать с этого в качестве базовой линии
Вы можете перенести свою дату в объект momentjs, например
$scope.dt = moment($scope.dt);
то do
<p id="summaryHeader">Calendar of {{dt.format("ddd Do")}}</p>
Другие варианты могут быть лучше, если вы уже не используете momentjs в другом месте, просто вариант.