How to format a date by displaying the month name in angular?


I have an object Date in my controller in Angular.

 $ = new Date;

I would like to format this date in the view to display the full month name. I want the name to be displayed in Portuguese.

Is there any formatting to display this in angular?

asked by Wallace Maxters 07.11.2016 в 19:55

2 answers


Use the date filter.

By passing MMM as parameter, the output will be the name of the shortened month (Jan - Dec). Using MMMM the output will be the month name in full (January - December).

It is also possible to use the date direct filter on the controller, injecting $filter .

In order for the names to be shown in Portuguese, you will need to have the internationalization script referenced in the project.

Complete example:

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

app.controller('testCtrl', function($scope, $filter){
  $ = new Date();  
  $scope.dataFormatada = $filter('date')($, 'MMMM');
<script src=""></script><scriptsrc=""></script>

<div ng-app="dt-app">
  <div ng-controller="testCtrl">
      <h4>Formatando direto na view</h4>
      {{ data | date: 'MMM'}}<br>
      {{ data | date: 'MMMM'}}
    <div id="dt-ctrl">
      <h4>Formatando no controller:</h4>
      {{ dataFormatada }}
07.11.2016 / 20:01

If you want to use pure Javascript :

function formatarDataExtenso(data) {
  // Meses possíveis
  var meses = ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'];
  // Dias possíveis
  var diasSemana = ['Domingo', 'Segunda-feira', 'Terça-feira', 'Quarta-feira', 'Quinta-feira', 'Sexta-feira', 'Sábado'];
  // Partes da data informada
  var dia = data.getDate();
  var dias = data.getDay();
  var mes = data.getMonth();
  var ano = data.getYear();
  // Resultado
  var extenso = '';

  // Para o navegador Netscape o ano começa em 1900
  if (navigator.appName == "Netscape") {
    ano = ano + 1900;

  return extenso = diasSemana[dias] + ', ' + dia + ' de ' + meses[mes] + ' de ' + ano;

// Teste com a data atual
console.log(formatarDataExtenso(new Date()));
07.11.2016 в 20:05