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.


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


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>

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.


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


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>

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>

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>


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

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>

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>

@Billa, he actualizado mi fragmento de código. Espero, ahora es más descriptivo.
Sunita
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.