Get month from date in angularjs ng-repeat - angularjs

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

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');

Answer 2

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