Angularjs - afficher la date actuelle

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

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 date angulaire Réf

Vous pouvez également le faire avec un filtre si vous ne souhaitez pas avoir à attacher un objet de date à la portée 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>

Modèle

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

Directif

.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 Datedirectement à l' objet 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.

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 à l'étendue où vous souhaitez évaluer cette expression.

Voici l'exemple de jsfiddle : jsfiddle

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

Juste mes 2 cents au cas où quelqu'un tomberait dessus :)

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 dont je l'ai mentionné ici.

Faites défiler la référence jusqu'à la première "Note" (désolé, elle n'a pas d'ancre)

Voici la méthode 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>

Vous pouvez utiliser moment()et format()fonctions 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>

<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>

Voici l'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();

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;
})

Une solution similaire à celle de @Nick G. en utilisant le filtre, mais qui rend le paramètre significatif:

Implémentez un filtre appelé relativedatequi calcule la date par rapport à la date actuelle par le paramètre donné comme diff. En conséquence, (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>

Une autre façon de faire est de: Dans Controller, créez une variable pour contenir la date actuelle 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>