Date format is not working in angularjs

Question

I am getting date from server in the below format.

"2017-07-10T20:51:13.000Z".

But when i am going to change the date format in "dd/MM/yyyy" format it is automatically add one more day.

Please check this plunkr.

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.date = '2017-07-10T20:51:13.000Z';
});

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="[email protected]" src="http://code.angularjs.org/1.2.14/angular.js" data-semver="1.2.14"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p ng-bind="date | date:'MM/dd/yyyy'"></p>
  </body>

</html>

My actual date is 10th July But my result i'm getting 11th July Please help me how can I resolve this issue.

Nainish Modi · Accepted Answer · 2017-07-11 12:00:52Z

2

//add custom filter
.filter('datetime', function($filter){
    return function(input){
      if(input == null){ return ""; } 

      var _date = $filter('date')(new Date(input),'MM/dd/yyyy');         
      return _date.toUpperCase();
   };
});

//html
{{ $scope.date | datetime }}

answered Jul 11, 2017 at 12:00

Nainish Modi

4882 silver badges10 bronze badges

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

Comments

pgreen2 · Accepted Answer · 2017-07-11 12:17:47Z

I believe we are struggling with the same problem with you are at my work. The problem is timezones. The date you specified is UTC (note the Z).
But the by default, the angular filer uses the browsers's timezone. You have a couple options. The first is a bit of a hack but might work, and force the browser to render in UTC:

{{ $scope.date | datetime | 'UTC'}}

This will work for rendering date (no time portion), assuming the dates are always in UTC. Just be careful that you are always using UTC.

The bigger solution (the one we are working on at work) is to be more specific about the date-time object required. We are now using specific date only values starting from the db all the way to the front end. This eliminates the concept of timezones. Which means we no longer use standard date objects on the backend or in the front-end (ie AngularJS). So you need to create a custom filter as well as a custom input to do this correctly.

Collectives™ on Stack Overflow

Date format is not working in angularjs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related