Angularjs – huidige datum weergeven

Ik heb een weergave in angularjs en ik probeer alleen de huidige datum weer te geven (opgemaakt). Ik dacht zoiets als <span>{{Date.now() | date:'yyyy-MM-dd'}}</span>zou de huidige datum moeten weergeven.

Antwoord 1, autoriteit 100%

U moet eerst een datumobject in uw controller maken:

controller:

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

bekijken:

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

JSFiddle-voorbeeld

Ref. hoekige datumfilter

Antwoord 2, autoriteit 18%

U kunt dit ook doen met een filter als u niet elke keer dat u de datum wilt afdrukken een datumobject aan het huidige bereik wilt toevoegen:

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

en dan in jouw zicht:

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

Antwoord 3, autoriteit 10%

Sjabloon

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

Richtlijn

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

Omdat je het Dateobject niet direct in een template kunt benaderen (voor een inline oplossing), heb ik voor deze richtlijn gekozen. Het houdt ook je controllers schoon en is herbruikbaar.

Antwoord 4, autoriteit 8%

Nou, je kunt het doen met een snoruitdrukking ({{Date.now() | date:'dd.MM.yyyy HH:mm:ss'}}). U hoeft alleen het object Date toe te wijzen aan het bereik waar u deze expressie wilt evalueren.

Hier is een jsfiddle-voorbeeld: jsfiddle

Maar verwacht niet dat het de waarde automatisch bijwerkt. Deze waarde wordt niet bekeken door angular, dus je moet digest activeren elke keer dat je het wilt bijwerken (bijvoorbeeld met $ interval) … wat verspilling van middelen is (en ook niet “aanbevolen” in documenten). Natuurlijk kun je de combinatie met richtlijnen/controllers gebruiken om alleen met de child scope te rommelen (het is altijd kleiner dan bijvoorbeeld rootScope en digest zal sneller zijn).

Antwoord 5, autoriteit 4%

Mijn 2 cent voor het geval iemand dit tegenkomt 🙂

Wat ik hier suggereer, zal hetzelfde resultaat hebben als het huidige antwoord, maar het is aanbevolen om uw controller te schrijven op de manier die ik hier heb genoemd.

Referentiescrol naar de eerste ‘Opmerking’(Sorry, het heeft geen anker )

Dit is de aanbevolen manier:

Controller:

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

Bekijken:

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

Antwoord 6

Je kunt de functies moment()en format()gebruiken in AngularJS.

Controller:

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

Bekijken:

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

Antwoord 7

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

Antwoord 8

Hier is een voorbeeld van uw antwoord: 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" />

en dan in de controller:

$scope.DateOfBirth = new Date();

Antwoord 9

Bekijken

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

Controller

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

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

Antwoord 10

Een oplossing vergelijkbaar met die van @Nick G.met behulp van filter, maar maak de parameter zinvol:

Implementeer een filter met de naam relativedatedie de datum berekent ten opzichte van de huidige datum door de gegeven parameter als diff. Als resultaat betekent (0 | relativedate)vandaag en (1 | relativedate)betekent 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')
  };
}]);

en uw html:

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

Antwoord 11

Een andere manier van doen is:
Maak in Controller een variabele om de huidige datum vast te houden, zoals hieronder weergegeven:

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

In HTML-weergave,

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