Angularjs - exibe a data atual


128

Eu tenho uma visão em angularjs e estou apenas tentando exibir a data atual (formatada). Eu pensei que algo como <span>{{Date.now() | date:'yyyy-MM-dd'}}</span>deveria exibir a data atual.


Seria .. mas não sabe Date.now().
putvande

2
Então, eu tenho que gerar a variável no controlador primeiro? Eu pensei que algo simples como a data atual seria mais fácil :)
Evo_x

1
Date.now()é função NodeJS
Nay

Respostas:


229

Você deve criar um objeto de data em seu controlador primeiro:

controlador:

function Ctrl($scope)
{
    $scope.date = new Date();
}

Visão:

<div ng-app ng-controller="Ctrl">
    {{date | date:'yyyy-MM-dd'}}
</div>

Exemplo JSFiddle

Referência de filtro de data angular


oi @sloth Eu quero usar o cgi para exibir a hora atual do sistema. Como posso possivelmente fazer isso ou é possível Graças?
bleyk

44

Você também pode fazer isso com um filtro se não desejar anexar um objeto de data ao escopo atual sempre que desejar imprimir a data:

.filter('currentdate',['$filter',  function($filter) {
    return function() {
        return $filter('date')(new Date(), 'yyyy-MM-dd');
    };
}])

e depois na sua opinião:

<div ng-app="myApp">
    <div>{{'' | currentdate}}</div>
</div>

5
Ele também pode fazer uma diretiva então
arg20

23

Modelo

<span date-now="MM/dd/yyyy"></span>

Directiva

.directive('dateNow', ['$filter', function($filter) {
  return {
    link: function( $scope, $element, $attrs) {
      $element.text($filter('date')(new Date(), $attrs.dateNow));
    }
  };
}])

Como você não pode acessar o Dateobjeto diretamente em um modelo (para uma solução em linha), optei por esta diretiva. Ele também mantém seus controladores limpos e é reutilizável.


19

Bem, você pode fazer isso com a expressão bigode ( {{Date.now() | date:'dd.MM.yyyy HH:mm:ss'}}). Você só precisa atribuir o objeto Date ao escopo em que deseja avaliar esta expressão.

Aqui está o exemplo do jsfiddle: jsfiddle

Mas não espere que ele atualize o valor automaticamente. Esse valor não é assistido por angular, portanto, é necessário acionar o resumo sempre que você deseja atualizá-lo (por $ intervalo, por exemplo) ... que é desperdício de recursos (e também não é "recomendado" nos documentos). É claro que você pode usar a combinação com diretivas / controladores para mexer apenas com o escopo filho (é sempre menor do que, por exemplo, rootScope e digest, será mais rápido).


9

Apenas meus 2 centavos no caso de alguém tropeçar nisso :)

O que estou sugerindo aqui terá o mesmo resultado que a resposta atual, no entanto, foi recomendado escrever seu controlador da maneira que mencionei aqui.

Rolar de referência para a primeira "Nota" (Desculpe, não tem âncora)

Aqui está a maneira recomendada:

Controlador:

var app = angular.module('myApp', []);   
app.controller( 'MyCtrl', ['$scope', function($scope) {
    $scope.date = new Date();
}]);

Visão:

<div ng-app="myApp">
  <div ng-controller="MyCtrl">
    {{date | date:'yyyy-MM-dd'}}
  </div>
</div>

2

Você pode usar moment()e format()funções no AngularJS.

Controlador:

var app = angular.module('demoApp', []);   
app.controller( 'demoCtrl', ['$scope', '$moment' function($scope , $moment) {
$scope.date = $moment().format('MM/DD/YYYY');
}]);

Visão:

<div ng-app="demoApp">
  <div ng-controller="demoCtrl">
    {{date}}
  </div>
</div>

2
<script type="text/javascript">
var app = angular.module('sampleapp', [])
app.controller('samplecontrol', function ($scope) {
   var today = new Date();
   console.log($scope.cdate);
   var date = today.getDate();
   var month = today.getMonth();
   var year = today.getFullYear();
   var current_date = date+'/'+month+'/'+year;
   console.log(current_date);
});
</script>


1

Visão

<div ng-app="myapp">
{{AssignedDate.now() | date:'yyyy-MM-dd HH:mm:ss'}}
</div>

Controlador

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

app.run(function($rootScope){
    $rootScope.AssignedDate = Date;
})

1

Uma solução semelhante à de @Nick G. usando filter, mas torne o parâmetro significativo:

Implemente um filtro chamado relativedateque calcula a data relativa à data atual pelo parâmetro fornecido como diff. Como resultado, (0 | relativedate)significa hoje e (1 | relativedate)amanhã.

.filter('relativedate', ['$filter', function ($filter) {
  return function (rel, format) {
    let date = new Date();
    date.setDate(date.getDate() + rel);
    return $filter('date')(date, format || 'yyyy-MM-dd')
  };
}]);

e seu html:

<div ng-app="myApp">
    <div>Yesterday: {{-1 | relativedate}}</div>
    <div>Today: {{0 | relativedate}}</div>
    <div>Tomorrow: {{1 | relativedate}}</div>
</div>

1

Outra maneira de fazer é: No Controller, crie uma variável para armazenar a data atual, como mostrado abaixo:

var eventsApp = angular.module("eventsApp", []);
eventsApp.controller("EventController", function EventController($scope) 
{

 $scope.myDate = Date.now();

});

Na visualização HTML,

<!DOCTYPE html>
<html ng-app="eventsApp">
<head>
    <meta charset="utf-8" />
   <title></title>
   <script src="lib/angular/angular.js"></script>
</head>
<body>
<div ng-controller="EventController">
<span>{{myDate | date : 'yyyy-MM-dd'}}</span>
</div>
</body>
</html>

@Billa, atualizei meu snippet de código. Espero que seja mais descritivo agora.
Sunita
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.