AngularJs: Show name of the month given the month number

Question

I have the month as a number (1,2,3,...) and would like to display the corresponding name. How can I do this?

Is it possible to use {{ date_expression | date[:format] }}

Solution 1

Please take a look at the documentation at https://docs.angularjs.org/api/ng/filter/date. There you will see the desired format:

{{date_expression | date:'MMMM'}}

From the docs:

'MMMM': Month in year (January-December)

Solution 2

If you have the month index, you could just create your own filter:

myApp.filter('monthName', [function() {
    return function (monthNumber) { //1 = January
        var monthNames = [ 'January', 'February', 'March', 'April', 'May', 'June',
            'July', 'August', 'September', 'October', 'November', 'December' ];
        return monthNames[monthNumber - 1];
    }
}]);

Then in your template:

{{date_expression | monthName}}

Solution 3

Format string can be composed of the following elements for months:

'MMMM': Month in year (January-December) - {{D_V | date:'yyyy-MMMM-dd'}}

'MMM': Month in year (Jan-Dec) - {{D_V | date:'yyyy-MMM-dd'}}

'MM': Month in year, padded (01-12) - {{D_V | date:'yyyy-MM-dd'}}

'M': Month in year (1-12) - {{D_V | date:'yyyy-M-dd'}}

Know more at Angular JS Date Filter

Solution 4

Truly, the simplest method is combination of two other answers posted here. Using filter in a filter to obtain conversion and display month name in current language set:

app.filter('monthname',['$filter',function($filter){
    return function(month) {
      return $filter("date")(new Date(0,month),'MMMM');
    }
}]);

Now you can use this way {{ 3 | monthname }}

Note that without this, the original filter {{ 3 | date:'MMMM' }} will not work as it expects Date type as the argument, and not a number.

Solution 5

I am to understand you have the month as an integer value and not a date object. The date filter only works with formatted datetime or millisecond as strings, milliseconds as integer, or a Date object.

So you'd need to convert that month integer value to something the filter understands. You can take the month integer value and make it zero-indexed and then create a new dummy Date object from it, then apply the filter against that Date.

Controller:

angular.module('demo', [])
  .controller('DemoCtrl', function($scope) {
      // here's the original value
      $scope.month = 0; // 0 for january, 11 for december

      // watch for changes to the value of month. turn it into a new date object that angular can bind and filter in the view
      $scope.$watch('month', function(val) {
        // note: if you are expecting the month value to be one-indexed, you'll need to subtract 1 from val to make it zero-indexed as Date expects
        $scope.date = new Date(2014, val);
      });
    });

View:

{{ date | date:'MMMM' }}

See this example.

Another option is to use the $filter service directly, if you need a more direct way of converting the value. You're doing basically the same thing, just formatting the value in the controller rather than in the view.

Controller:

// Code goes here
angular.module('demo', [])
  .controller('DemoCtrl', function($scope, $filter) {
      // here's the original value
      $scope.month = 0;

      // watch for changes to the value of month, and then format it directly
      $scope.$watch('month', function(val) {
        $scope.date = $filter('date')(new Date(2014, val), 'MMMM');
      });
    });

View:

{{ date }}

Alternate example

View more solutions

Comments

[user880386]

I tired it but I obtain only January

[thomaux]

Isn't that what you requested?

[Exitos]

Nice example of how angular does it

[Alejandro Sanz Díaz]

I'm only getting January also, iterating over an array from 0 to 11. Is weird because the following plunker works perfectly: plnkr.co/edit/XRX4z9NJCWBtgxbVnUCM?p=preview

[Alejandro Sanz Díaz]

Ok, I found what is happening. date:'MMMM' must be used with a Date object. So instead of an array of integers from 0 to 11, I had to do: [new Date(2014, 0),new Date(2014, 1),new Date(2014, 2), ...] and so on.

[SgtPooki]

You should put the monthNames array inside the filter definition function, but outside of the returned function so it's only being built once. If someone is doing an ng-repeat or ng-class or something, that will be a non-trivial amount of overhead.

[Ângelo Rigo]

How would it be done if i need write the name of the month inside a controller? Can i apply the filter somehow ? or how to apply a service to display the month name ? var choosenMonth = $scope.formData.monthNumber; $scope.headers = ['Done in '+choosenMonth+'', 'In work until '+choosenMonth+')'];

[kcsoft]

You need to inject the $filter service to the controller and then you can use $filter('filtername')(arg1,arg2);, in this case $filter('monthName')(chosenMonth)

[Chris]

When using angular-locale, you can do the following: function ($locale) { return function (monthNumber) { return $locale.DATETIME_FORMATS.MONTH[monthNumber - 1]; } }