CODEWITHSUNDEEP
javascripthtmlcssangularjs
Abhishek Pandey
Abhishek Pandey

Reputation: 13558

Date filter formatting Angularjs

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>

Upvotes: 0

Views: 73

Answers (2)

Steeve Pitis
Steeve Pitis

Reputation: 4443

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>

Upvotes: 2

hdotluna
hdotluna

Reputation: 5732

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.

Upvotes: 1

Related Questions