Angularjs - zeigt das aktuelle Datum an

Ich habe eine Ansicht in anglejs und versuche nur, das aktuelle Datum anzuzeigen (formatiert). Ich dachte, so etwas <span>{{Date.now() | date:'yyyy-MM-dd'}}</span>sollte das aktuelle Datum anzeigen.

Sie müssen zuerst ein Datumsobjekt in Ihrem Controller erstellen:

Regler:

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

Aussicht:

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

JSFiddle-Beispiel

Winkeldatumsfilter Art.-Nr.

Sie können dies auch mit einem Filter tun, wenn Sie nicht jedes Mal, wenn Sie das Datum drucken möchten, ein Datumsobjekt an den aktuellen Bereich anhängen müssen:

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

und dann aus Ihrer Sicht:

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

Vorlage

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

Richtlinie

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

Da Sie Datein einer Vorlage (für eine Inline-Lösung) nicht direkt auf das Objekt zugreifen können, habe ich mich für diese Richtlinie entschieden. Es hält auch Ihre Controller sauber und ist wiederverwendbar.

Nun, Sie können es mit Schnurrbart Ausdruck ( {{Date.now() | date:'dd.MM.yyyy HH:mm:ss'}}) tun . Sie müssen das Date-Objekt nur dem Bereich zuweisen, in dem Sie diesen Ausdruck auswerten möchten.

Hier ist ein Beispiel für jsfiddle: jsfiddle

Erwarten Sie jedoch nicht, dass der Wert automatisch aktualisiert wird. Dieser Wert wird nicht von Angular überwacht, daher müssen Sie jedes Mal einen Digest auslösen, wenn Sie ihn aktualisieren möchten (z. B. nach $ -Intervall). Dies ist eine Verschwendung von Ressourcen (und in Dokumenten auch nicht "empfohlen"). Natürlich können Sie die Kombination mit Direktiven / Controllern verwenden, um nur mit dem untergeordneten Bereich herumzuspielen (es ist immer kleiner als zum Beispiel rootScope und Digest ist schneller).

Nur meine 2 Cent für den Fall, dass jemand darauf stößt :)

Was ich hier vorschlage, hat das gleiche Ergebnis wie die aktuelle Antwort. Es wurde jedoch empfohlen, Ihren Controller so zu schreiben, wie ich es hier erwähnt habe.

Referenz scrollen Sie zum ersten "Hinweis" (Entschuldigung, es gibt keinen Anker)

Hier ist der empfohlene Weg:

Regler:

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

Aussicht:

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

Sie können moment()und verwendenformat() Funktionen in AngularJS verwenden.

Regler:

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

Aussicht:

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

Hier ist das Beispiel Ihrer Antwort: 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" />

und dann in der Steuerung:

$scope.DateOfBirth = new Date();

Aussicht

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

Regler

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

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

Eine Lösung ähnlich der von @Nick G. unter Verwendung von Filter, aber machen Sie den Parameter aussagekräftig:

Implementieren Sie einen Filter namens, relativedateder das Datum relativ zum aktuellen Datum anhand des angegebenen Parameters als diff berechnet. Infolgedessen (0 | relativedate)bedeutet heute und (1 | relativedate)morgen.

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

und dein HTML:

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

Eine andere Möglichkeit ist: Erstellen Sie in Controller eine Variable, die das aktuelle Datum enthält, wie unten gezeigt:

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

 $scope.myDate = Date.now();

});

In der HTML-Ansicht

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