How to format a date in 'dd/MM/yyyy' format?

Question

How to get a formatted string from an object of type Date in format dd/MM/yyyy?

Answer 1

Use the Angularjs filters

To format dates in Angular, there is the Angular Filter which is very useful and easy to use, whether in the view or us controllers. The filter can still be used to format any type of object. For date there are several possible combinations.

How to use Filters?

In an HTML template

{{ filter_expression | filter : expression : comparator}}

In javascript code (Directives, controllers, etc)

$filter('filter')(array, expression, comparator)

How to format dates?

You can convert your Date type object into any string based on settings, see some examples:

• yyyy 4-digit year
• MM 2-digit month (01-12)
• M 1 or 2 digit month (1-12)
• dd two-digit day (01-31)
• dday with 1 or 2 digits (1-31)
• or see the full list on angular documentation

There is also the possibility to add the Angular Locale in your project to use the formats in the language you want, in our case EN or EN.

Code example - HTML template

angular
  .module('myApp', [])
  .controller('myController', myController);

myController.$inject = ['$scope'];

function myController($scope) {
  $scope.data = new Date(2014, 11 - 1, 13, 17, 17, 47, 0);
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
  <p><b>Valor original:</b> {{ data }}</p>
  <p><b>dd/MM/yyyy:</b> {{ data | date: 'dd/MM/yyyy' }}</p>
  <p><b>Data completa:</b> {{ data | date: 'fullDate' }}</p>
</div>

Code example - Controller

angular
  .module('myApp', [])
  .controller('myController', myController);

myController.$inject = ['$scope', '$filter'];

function myController($scope, $filter) {
  var data = new Date(2014, 11 - 1, 13, 17, 17, 47, 0);
  $scope.data = data;
  $scope.dataFormatada = $filter('date')(data, 'dd/MM/yyyy');
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
  <p><b>Original:</b> {{ data }}</p>
  <p><b>Formatada:</b> {{ dataFormatada }}</p>
</div>

Answer 2

The @Pedro answer already answers your question, but I’d like to show you an example where we can work with filters on Controller:

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

myApp.controller("MyCtrl", function($scope, $filter){
 var data = "2016-02-18T10:23Z";
     $scope.dataFormatada = $filter('date')(data, 'dd/MM/yyyy');
});
    

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  Data Formatada, {{dataFormatada}}!
</div>

NOTE: To work with dates in our format recommend taking a look at locale

Answer 3

This filter helps me deal with timestamps

dateFilter.js

angular.module("zendapp").filter("brdateFilter", function(){
return function(input) {
    var o = input.replace(/-/g, "/"); // Troca hifen por barra
    return Date.parse(o + " -0000"); 
};
});

index.html

{{row.created_at.date | brdateFilter | date:"dd/MM/yyyy HH:mm"}}