web-dev-qa-db-fra.com

Angularjs - affiche la date actuelle

J'ai eu une vue dans angularjs et j'essaye juste d'afficher la date actuelle (formatée). Je pensais que quelque chose comme <span>{{Date.now() | date:'yyyy-MM-dd'}}</span> devrait afficher la date actuelle.

javascriptangularjs
121
Evo_x

Vous devez d'abord créer un objet de date dans votre contrôleur:

manette:

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

vue:

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

Exemple JSFiddle

Filtre de date angulaire Ref

219
sloth

Vous pouvez également le faire avec un filtre si vous ne souhaitez pas associer un objet de date à l'étendue actuelle chaque fois que vous souhaitez imprimer la date:

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

et ensuite à votre avis:

<div ng-app="myApp">
    <div>{{'' | currentdate}}</div>
</div>
44
Nick G.

Modèle 

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

Directive 

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

Comme vous ne pouvez pas accéder directement à l'objet Date dans un modèle (pour une solution en ligne), j'ai opté pour cette directive. Il garde également vos contrôleurs propres et est réutilisable.

22
flori

Eh bien, vous pouvez le faire avec l'expression de moustache ({{Date.now() | date:'dd.MM.yyyy HH:mm:ss'}}). Il vous suffit d'affecter l'objet Date à la portée où vous souhaitez évaluer cette expression. 

Voici un exemple de jsfiddle: jsfiddle

Mais ne vous attendez pas à ce qu'il mette à jour la valeur automatiquement. Cette valeur n'est pas surveillée par angular donc vous devez déclencher digérer à chaque fois que vous voulez la mettre à jour (par $ intervalle par exemple) ... ce qui est un gaspillage de ressources (et pas non plus "recommandé" dans la documentation). Bien sûr, vous pouvez utiliser une combinaison de directives/contrôleurs pour manipuler uniquement la portée enfant (elle est toujours plus petite que, par exemple, rootScope et digest sera plus rapide).

19
JakubKnejzlik

Juste mes 2 cents au cas où quelqu'un tomberait sur ça :)

Ce que je suggère ici aura le même résultat que la réponse actuelle, mais il a été recommandé d’écrire votre contrôleur de la manière que j'ai mentionnée ici.

Référence aller au premier "Note" (désolé, il n'a pas d'ancre)

Voici la manière recommandée:

Manette:

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

Vue:

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

Vous pouvez utiliser les fonctions moment() et format() dans AngularJS.

Manette: 

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

Vue: 

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

Vue 

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

Manette

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

app.run(function($rootScope){
    $rootScope.AssignedDate = Date;
})
1
Manish Kumar Singh

Une solution similaire à celle de @Nick G. en utilisant un filtre, mais donnez du sens au paramètre:

Implémentez un filtre appelé relativedate qui calcule la date par rapport à la date du jour à l'aide du paramètre donné sous la forme diff. Par conséquent, (0 | relativedate) signifie aujourd'hui et (1 | relativedate) signifie demain.

.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')
  };
}]);

et votre html:

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

Voici un exemple de votre réponse: http://plnkr.co/edit/MKugkgCSpdZFefSeDRi7?p=preview

<span>Date Of Birth: {{DateOfBirth | date:"dd-MM-yyyy"}}</span>
<input type="text" datepicker-popup="dd/MM/yyyy" ng-model="DateOfBirth" class="form-control" />

puis dans le contrôleur:

$scope.DateOfBirth = new Date();
1
Mohaimin Moin
<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>
0
nallapagan nallapagan

Une autre façon de procéder est la suivante: Dans Controller, créez une variable pour conserver la date du jour comme indiqué ci-dessous:

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

 $scope.myDate = Date.now();

});

En vue 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>
0
Sunita