Angularjs - muestra la fecha actual

128

Obtuve una vista en angularjs y solo estoy tratando de mostrar la fecha actual (formateada). Pensé que algo así <span>{{Date.now() | date:'yyyy-MM-dd'}}</span>debería mostrar la fecha actual.

Evo_x
fuente
Lo haría ... pero no lo sabe Date.now().
putvande
2
Entonces, ¿tengo que generar la variable en el controlador primero? Pensé que algo simple como la fecha actual sería más fácil :)
Evo_x
1
Date.now()es la función nodeJS
No,

Respuestas:

229

Primero debe crear un objeto de fecha en su controlador:

controlador:

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

ver:

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

JSFiddle ejemplo

Filtro de fecha angular Ref

perezoso
fuente
hola @sloth Quiero usar cgi para mostrar la hora actual del sistema. ¿Cómo puedo hacer eso? ¿O es posible? Gracias
bleyk
44

También puede hacer esto con un filtro si no desea tener que adjuntar un objeto de fecha al ámbito actual cada vez que desee imprimir la fecha:

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

y luego en tu opinión:

<div ng-app="myApp">
    <div>{{'' | currentdate}}</div>
</div>
Nick G.
fuente
55
Él también puede hacer una directiva entonces
arg20
23

Modelo

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

Directiva

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

Como no puede acceder al Dateobjeto directamente en una plantilla (para una solución en línea), opté por esta Directiva. También mantiene sus controladores limpios y es reutilizable.

flori
fuente
19

Bueno, puedes hacerlo con la expresión de bigote ( {{Date.now() | date:'dd.MM.yyyy HH:mm:ss'}}). Solo necesita asignar el objeto Fecha al ámbito donde desea evaluar esta expresión.

Aquí está el ejemplo de jsfiddle : jsfiddle

Pero no espere que actualice el valor automáticamente. Angular no observa este valor, por lo que debe activar el resumen cada vez que desee actualizarlo (por $ intervalo, por ejemplo) ... lo cual es una pérdida de recursos (y tampoco "recomendado" en los documentos). Por supuesto, puede usar la combinación con directivas / controladores para jugar solo con el ámbito secundario (siempre es más pequeño que, por ejemplo, rootScope y digest será más rápido).

JakubKnejzlik
fuente
9

Solo mis 2 centavos por si alguien se topa con esto :)

Lo que sugiero aquí tendrá el mismo resultado que la respuesta actual, sin embargo, se ha recomendado escribir su controlador de la manera que he mencionado aquí.

Desplazamiento de referencia a la primera "Nota" (lo siento, no tiene ancla)

Aquí está la forma recomendada:

Controlador:

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

Ver:

<div ng-app="myApp">
  <div ng-controller="MyCtrl">
    {{date | date:'yyyy-MM-dd'}}
  </div>
</div>
Señor h
fuente
2

Puede usar moment()y format()funciones en AngularJS.

Controlador:

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

Ver:

<div ng-app="demoApp">
  <div ng-controller="demoCtrl">
    {{date}}
  </div>
</div>
nari_atyachari
fuente
2
<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>
nallapagan nallapagan
fuente
1

Aquí está la muestra de su respuesta: 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" />

y luego en el controlador:

$scope.DateOfBirth = new Date();
Mohaimin Moin
fuente
1

Ver

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

Controlador

aplicación var = angular.module ('myapp', [])

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

Una solución similar a la de @Nick G. mediante el uso de filtro, pero hace que el parámetro sea significativo:

Implemente un filtro llamado relativedateque calcule la fecha relativa a la fecha actual por el parámetro dado como diff. Como resultado, (0 | relativedate)significa hoy y (1 | relativedate)significa mañana.

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

y tu html:

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

Otra forma de hacerlo es: en Controller, cree una variable para mantener la fecha actual como se muestra a continuación:

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

 $scope.myDate = Date.now();

});

En la vista 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>
Sunita
fuente
@Billa, he actualizado mi fragmento de código. Espero, ahora es más descriptivo.
Sunita