it-swarm.com.de

Angularjs - zeigt das aktuelle Datum an

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

121
Evo_x

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

Angular Date Filter Ref

219
sloth

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

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

und dann aus deiner Sicht:

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

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 nicht direkt auf das Date-Objekt in einer Vorlage zugreifen können (für eine Inline-Lösung), habe ich mich für diese Richtlinie entschieden. Es hält auch Ihre Controller sauber und ist wiederverwendbar.

22
flori

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

Hier ist jsfiddle Beispiel: jsfiddle

Erwarten Sie jedoch nicht, dass der Wert automatisch aktualisiert wird. Dieser Wert wird nicht von angle überwacht. Sie müssen also jedes Mal Digest auslösen, wenn Sie möchten, dass er aktualisiert wird (z. B. nach $ Intervall). Dies ist Ressourcenverschwendung (und in Dokumenten nicht "empfohlen"). Natürlich können Sie die Kombination mit Anweisungen/Controllern nur für den untergeordneten Bereich verwenden (es ist immer kleiner als zum Beispiel rootScope und Digest ist schneller).

19
JakubKnejzlik

Nur meine 2 Cent für den Fall, dass jemand darüber stolpert :)

Was ich hier vorschlage, hat dasselbe Ergebnis wie die aktuelle Antwort. Es wurde jedoch empfohlen, Ihren Controller auf die hier beschriebene Weise zu schreiben.

Referenz zum ersten "Hinweis" blättern (Sorry, es hat 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>
9
Mr H

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

Controller:

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

Aussicht

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

Controller

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

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

Eine Lösung, die ähnlich ist wie die von @Nick G. , indem ein Filter verwendet wird, der Parameter jedoch sinnvoll ist:

Implementieren Sie einen Filter mit dem Namen relativedate, der das Datum relativ zum aktuellen Datum anhand des angegebenen Parameters als diff berechnet. Folglich bedeutet (0 | relativedate) 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>
1
tsh

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 im Controller:

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

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

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