Date filter formatting 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>

have you considered the case of 30 Jan to 4th Feb ?

Keyur Shah
– Keyur Shah

2016-10-12 10:18:32 +00:00
Commented Oct 12, 2016 at 10:18 — Keyur Shah
– Keyur Shah, Commented Oct 12, 2016 at 10:18

Steeve Pitis · Accepted Answer · 2016-10-12 10:29:44Z

2

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>

edited Oct 12, 2016 at 10:29

answered Oct 12, 2016 at 10:11

Steeve Pitis

4,4631 gold badge24 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Abhishek Pandey Over a year ago

Cool!! This will help me a lot buddy!! :)

hdotluna · Accepted Answer · 2016-10-12 10:09:05Z

1

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.

answered Oct 12, 2016 at 10:09

hdotluna

5,7524 gold badges23 silver badges32 bronze badges

2 Comments

Abhishek Pandey Over a year ago

By your code I got this 14 - 15 Sep 22:00 - 00:00 Time is not correct

hdotluna Over a year ago

Sorry. I'm busy so I didn't reply in time. Glad someone helped you. Just keep hackin' :)

Collectives™ on Stack Overflow

Date filter formatting Angularjs

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related