Angularjs - visualizza la data corrente

Question

Ho una vista in angularjs e sto solo cercando di visualizzare la data corrente (formattata). Ho pensato che qualcosa come <span>{{Date.now() | date:'yyyy-MM-dd'}}</span> dovrebbe mostrare la data corrente.

Answer 1

È necessario creare un oggetto data nel vostro controller prima:

regolatore:

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

vista:

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

JSFiddle example

Angular Date Filter Ref

Answer 2

Bene, puoi farlo con l'espressione baffi ({{Date.now() | date:'dd.MM.yyyy HH:mm:ss'}}). Devi solo assegnare l'oggetto Date all'ambito in cui vuoi valutare questa espressione.

Ecco esempio jsfiddle: jsfiddle

Ma non aspettatevi per aggiornare automaticamente il valore. Questo valore non è visto da angolari, quindi devi attivare il digest ogni volta che vuoi aggiornarlo (ad esempio con $ interval) ... che è uno spreco di risorse (e anche non "raccomandato" nei documenti). Ovviamente è possibile utilizzare la combinazione con direttive/controller per aggirare solo l'ambito figlio (è sempre più piccolo rispetto ad esempio a rootScope e digest sarà più veloce).

Answer 3

solo i miei 2 centesimi in caso qualcuno imbattervi in ​​questo :)

Quello che sto suggerendo qui avrà lo stesso risultato come la risposta corrente tuttavia è stato raccomandato di scrivere il vostro controller il modo che ho citato qui .

Reference di scorrimento per la prima "Nota" (Mi dispiace che non hai ancora)

Qui è il metodo consigliato:

Controller:

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

Vista:

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

Answer 4

Puoi anche fare questo con un filtro, se non si vuole dover collegare un oggetto data per l'ambito corrente ogni volta che si desidera stampare la data:

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

e quindi a suo avviso:

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

Answer 5

Ecco l'esempio della vostra risposta: 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" /> 

e poi nel controller:

$scope.DateOfBirth = new Date(); 

Answer 6

È possibile utilizzare le funzioni moment() e format() in AngularJS.

Controller:

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

Vista:

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

Answer 7

Template

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

D DIRETTIVA

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

Purtroppo sembra che ci sia alcun modo per accedere all'oggetto Date nel modello di una soluzione in linea. Come voglio anche mantenere puliti i miei controller, ho optato per una direttiva.

Answer 8

View

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

Answer 9

una soluzione simile a the one of @Nick G. utilizzando il filtro , ma rendere il parametro significativo:

Implementare un filtro chiamato relativedate che calcola la data relativa alla data corrente dal parametro specificato come diff. Di conseguenza, (0 | relativedate) significa oggi e (1 | relativedate) significa domani.

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

e il vostro html:

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

Answer 10

Un altro modo di fare è: In Controller, creare una variabile per contenere la data corrente come illustrato di seguito:

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

$scope.myDate = Date.now(); 

}); 

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