日期过滤器格式化Angularjs

Question

I want to show date and time on my app in this format,

Date: 14 - 19 Sep
Time: 16:30 to 18:30

And I'm getting data from server in below format,

"EventDate":"2015-09-14T16:30:00Z",
"EndDate":"2015-09-14T18:30:00Z",

I tried angualrjs date filter,

and now I'm getting date in below format,

Sep 14, 2015 - Sep 19, 2015

I tried many examples from SO but didn't work for me,

Date formatting AngularJS to display only the day and month

How can I display my Date in following format,

Event Date: 14 - 19 Sep
Event Time: 16:30 to 18:30

 var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.Evdate = { "j": [{ "EventDate": "2015-09-14T16:30:00Z", "EndDate": "2015-09-14T18:30:00Z" }] } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <div ng-app="myApp" ng-controller="myCtrl"> {{Evdate.j[0].EventDate | date}} - {{Evdate.j[0].EndDate | date}} </div> 

Answer 1

You just missed the format argument. Look the documentation filter / date

 var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.Evdate = { "j": [{ "EventDate": "2015-09-14T16:30:00Z", "EndDate": "2015-09-14T18:30:00Z" }] } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <div ng-app="myApp" ng-controller="myCtrl"> Event Date : {{Evdate.j[0].EventDate | date : 'd'}} - {{Evdate.j[0].EndDate | date : 'd MMM' }}<br /> Event time : {{Evdate.j[0].EventDate | date : 'HH:mm' : 'UTC' }} to {{Evdate.j[0].EndDate | date : 'HH:mm' : 'UTC' }} </div> 

Answer 2

For month. Try this.

{{Evdate.j[0].EventDate | date : 'd'}} - {{Evdate.j[0].EndDate | date : 'd MMM'}}

For time

{{Evdate.j[0].EventDate | date : 'HH:mm'}} - {{Evdate.j[0].EndDate | date : 'HH:mm'}}

Hope it helps. Notify me if it doesn't work.