Extending Date Formats For Angularjs Date Filter

Angularjs provides a Date Filter for formatting date. How can I get the date in following format ? dd(st || nd || th) mm yyyy 1st May 2014 1^st May 2014 Sho

Solution 1:

In order do what your after your going to need a filter that provides ordinals when given a number, and just the ordinal on its own. https://github.com/chrisiconolly/angular-all-ordinal-filters (full disclaimer: my own project) does just this.

Follow the readme to install the filter into your project, short version here:

bower install --save angular-all-ordinal

add the following line to your .html file

<scriptsrc="path/to/angular-all-ordinal.min.js"></script>

and finally add the module as a dependency

angular.module('demo', ['ordinal'])

Once thats setup you can use the ordinal filter and the date filter together by chaining them together.

<p>{{myDateObject | date:'dd'}}<sup>{{myDateObject | date:'dd' | ordinalOnly}}</sup> {{myDateObject | date :'MMMM yyyy'}}</p>

you'll end up with your desired result:

<p>1<sup>st</sup> May 2015</p>

Solution 2:

I also had the same requirement, in between i landed here, So here I have experimented some thing. check out

Fiddle Demo

var myApp = angular.module('myApp', []).filter('ordinal', function() {
  returnfunction(input) {
    var date = newDate(input);
    var dayOfMonth = date.getDate();
    var suffix = dayOfMonth;
      var suffixes = ["th", "st", "nd", "rd"];
    var relevantDigits = (dayOfMonth < 30) ? dayOfMonth % 20 : dayOfMonth % 30;
      var suf = (relevantDigits <= 3) ? suffixes[relevantDigits] : suffixes[0];
    return  input+' '+suf;
  }
});

Solution 3:

Write custom filter to achieve this

filter('ordinal', function() {
  returnfunction(input) {
    var s=["th","st","nd","rd"],
    v=input%100;
    returninput+(s[(v-20)%10]||s[v]||s[0]);
  }
});

Checkout the working fiddle here http://jsfiddle.net/trinathm/vF2gt/

Solution 4:

Correct, you can create your own custom filters like:

angular.module('', [])
  .filter('someFilter', function() {
    returnfunction(input,param1) {
    ...

In your html all you need to do is to using as any other filter like {{somevalue | someFilter}}

Going back to your date problem, the second thing you may know is that you can invoke the filters directly from code by injecting $filter service; this will let you can grab any values from the filter:

var filteredDate = $filter('date')(newDate(input), 'dd MMMM');

Putting all together, I think this would be my recommended way to implement the custom filter

 angular.module('', [])
      .filter('someFilter', function($filter) {
        returnfunction(input) {
            var filteredYearMonth = $filter('date')(newDate(input), 'MMMM yyyy');
            var filteredDay = (newDate(input)).getDay();
            var arr = ['st', 'nd', 'rd']
            var myDate  arr[filteredDay] || "th" + filteredYearMonth;

            return myDate
        ...