Get month from date in angularjs ng-repeat

Question

I have an AngularJS 1.X app with a date field retrieved from a .json file. The date is being converted from a string to a date object to order the list but I need to capture the "month" part of the date to group by and for separate display but can't figure it out.

Here's my controller and HTML:

Angular Controller:

(function () {

    "use strict";

    angular.module("xxyyzz")
        .controller("displayEventCtrl", displayEventCtrl);

    function displayEventCtrl($http) {
        var model = this;
        model.header = "Upcoming Events";
        model.events = [];
        $http.get("/App/Data/eventCalendar.json")
            .then(function (response) {
                model.events = response.data;
                console.log(model.events);
            });
        model.sortDate = function (event) {
            var date = new Date(event.date);
            return date;
        }
    }
})();

HTML:

    <div ng-controller="displayEventCtrl as model">
    <h3><i class="fa fa-calendar"></i> {{model.header}}</h3>
    <div class="list-group">
        <a href="#" class="list-group-item" ng-repeat="event in model.events | orderBy : -model.sortDate : true track by $index">
            <div class="list-group-item-heading">
                <h4>{{event.title}}</h4>
            </div>
            <p class="list-group-item-text">
                Tuctus placerat scelerisque.
            </p>
            <div class="row">
                <div class="col-xs-6">
                    <span class="small">{{event.location}}</span>
                </div>
                <div class="col-xs-6">
                    <span class="small pull-right">
                        {{event.startTime}} - {{event.endTime}}
                    </span>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-9">
                    <span class="small">{{event.city}}, {{event.state}}</span>
                </div>
                <div class="col-xs-3">
                    <span class="small pull-right">{{event.date}}</span>
                    <div class="clearfix"></div>
                </div>
            </div>
        </a>
    </div>
</div>

JSON example:`

    [
  {
    "id": 1,
    "title": "Christmas Parade",
    "date": "12/25/2017",
    "city": "Dallas",
    "state": "TX",
    "location": "Galleria Mall",
    "startTime": "11:00",
    "endTime": "15:00"
  },
  {
    "id": 2,
    "title": "Thanksgiving Parade",
    "date": "11/23/2017",
    "city": "Denver",
    "state": "CO",
    "location": "Mile High Stadium",
    "startTime": "11:00",
    "endTime": "15:00"
  },
  {
    "id": 3,
    "title": "Halloween Parade",
    "date": "10/31/2017",
    "city": "Sleepy Hollow",
    "state": "NY",
    "location": "Ichabod Crane House",
    "startTime": "19:00",
    "endTime": "21:00"
  },
  {
    "id": 4,
    "title": "Independence Day Fireworks",
    "date": "07/04/2017",
    "city": "Washington",
    "state": "DC",
    "location": "National Mall",
    "startTime": "11:00",
    "endTime": "15:00"
  }
]

Any help would be appreciated.

Answer 1

To get the month, use the getMonth() function

var Xmas95 = new Date('December 25, 1995 23:15:30');
var month = Xmas95.getMonth();

console.log(month); // 11

---

My issue is that I am trying to pull the date from the array in the ng-repeat. So I can't declare the variable like above as it is part of a returned array {{event.date}}. What I need to know is how to get that date part from the nested item.

Use a custom filter to convert the text data to a Date object:

angular.module("app",[])
.filter("toDate", function() {
   return function(data) {
     return new Date(data);
   };
})
.run(function($rootScope) {
  var vm = $rootScope;
  vm.Xmas95 = 'December 25, 1995 23:15:30';
})

<script src="//unpkg.com/angular/angular.js"></script>
<div ng-app="app">
   Month number = {{Xmas95 | toDate | date: 'MM'}}
</div>

For more information, see

• AngularJS Developer Guide - Creating Custom Filters
• AngularJS date Filter API Reference

Answer 2

You can use js api named moment. Inject moment as dependency. You can use moment to get date in any formate you want.

moment ().get ('month');