Formato de fecha y hora en AngularJS

123

¿Cómo visualizo correctamente la fecha y la hora en AngularJS?

La salida a continuación muestra tanto la entrada como la salida, con y sin el filtro de fecha AngularJS:

In: {{v.Dt}}  
AngularJS: {{v.Dt | date:'yyyy-MM-dd HH:mm:ss Z'}}

Esto imprime:

In: 2012-10-16T17:57:28.556094Z 
AngularJS: 2012-10-16T17:57:28.556094Z

El formato de visualización deseado es 2010-10-28 23:40:23 0400o2010-10-28 23:40:23 EST

bsr
fuente

Respuestas:

63

v.Dt probablemente no sea un objeto Date ().

Ver http://jsfiddle.net/southerd/xG2t8/

pero en tu controlador:

scope.v.Dt = Date.parse(scope.v.Dt);
David Souther
fuente
La fecha de David en mi caso se almacena en formato DD / MM / AAAA en la Base de datos. Convierto que le muestro el formato DD.MM.YYYY del usuario en el cuadro de texto o tomo la entrada del usuario en ese formato y el mismo se actualiza en mi modelo. cómo cambiar eso antes de pasarlo a DB. ¿Cómo debería cambiar?
Yogesh
120

Su código debería funcionar como lo tiene ver este violín .

Sin embargo , deberá asegurarse de que v.Dtsea ​​un objeto Date adecuado para que funcione.

{{dt | date:'yyyy-MM-dd HH:mm:ss Z'}}

o si dateFormat se define en el alcance como dateFormat = 'aaaa-MM-dd HH: mm: ss Z':

{{dt | date:dateFormat }}
Gloopy
fuente
Como el formato es una opción cosmética, generalmente es una mejor idea hacerlo directamente en la vista.
Puce
thnkx..super ans. ¿Es posible mostrar la hora en formato de 12 horas?
Vishnu Prasad
dt puede ser una marca de tiempo de Unix en formato entero también funciona
tom10271
no se requiere que sea un Datetipo para variable. La marca de tiempo también funciona bien
Vlad
59

Sé que este es un artículo viejo, pero pensé en agregar otra opción para considerar.

Como la cadena original no incluye el demarker "T", la implementación predeterminada en Angular no la reconoce como una fecha. Puede forzarlo con la nueva Fecha, pero eso es un poco complicado en una matriz. Dado que puede conectar los filtros, puede usar un filtro para convertir su entrada en una fecha y luego aplicar la fecha: filtro en la fecha convertida. Cree un nuevo filtro personalizado de la siguiente manera:

app
.filter("asDate", function () {
    return function (input) {
        return new Date(input);
    }
});

Luego, en su marcado, puede conectar los filtros:

{{item.myDateTimeString | asDate | date:'shortDate'}}
Jim Wooley
fuente
Sí, más confiable y eficiente ... Gracias por compartir
azhar_SE_nextbridge
56

puede obtener el filtro 'fecha' de esta manera:

var today = $filter('date')(new Date(),'yyyy-MM-dd HH:mm:ss Z');

Esto le dará la fecha de hoy en el formato que desee.

CodeOverRide
fuente
jajaja sí, Leandro. No sé cómo lo consiguió así. Creo que estaba pensando en 'usar'.
CodeOverRide
49

Aquí hay un filtro que tomará una cadena de fecha O un objeto Date () de JavaScript. Utiliza Moment.js y puede aplicar cualquier función de transformación de Moment.js , como la popular 'fromNow'

angular.module('myModule').filter('moment', function () {
  return function (input, momentFn /*, param1, param2, ...param n */) {
    var args = Array.prototype.slice.call(arguments, 2),
        momentObj = moment(input);
    return momentObj[momentFn].apply(momentObj, args);
  };
});

Entonces...

{{ anyDateObjectOrString | moment: 'format': 'MMM DD, YYYY' }}

mostraría el 11 de noviembre de 2014

{{ anyDateObjectOrString | moment: 'fromNow' }}

mostraría hace 10 minutos

Si necesita llamar a funciones de momentos múltiples, puede encadenarlas. Esto convierte a UTC y luego formatea ...

{{ someDate | moment: 'utc' | moment: 'format': 'MMM DD, YYYY' }}

https://gist.github.com/cmmartin/341b017194bac09ffa1a

Charlie Martin
fuente
¡Es un método más poderoso ! ¡Gracias!
Modder
2
Esto es brillante y también se puede combinar con Moment Timezone. por ejemplo: {{foo.created_at | moment: 'tz': 'America / New_York' | moment: 'format': 'h: mm a z'}}
Dave Collins el
22

Aquí hay algunos ejemplos populares:

<div>{{myDate | date:'M/d/yyyy'}}</div> 4/7/2014

<div>{{myDate | date:'yyyy-MM-dd'}}</div> 2014-07-04

<div>{{myDate | date:'M/d/yyyy HH:mm:ss'}}</div> 4/7/2014 12:01:59

James Lawruk
fuente
simple, elegante y exactamente lo que se preguntó
Ignotus
15

¿Has visto la sección de Directivas de escritura (versión corta) de la documentación? ?

HTML

<div ng-controller="Ctrl2">
      Date format: <input ng-model="format"> <hr/>
      Current time is: <span my-current-time="format"></span>
</div> 

JS

function Ctrl2($scope) {
  $scope.format = 'M/d/yy h:mm:ss a';
}
Persecución
fuente
2
Creo que tu comentario es muy válido. Aprender a hacer filtros es una parte esencial de AngularJS. Realmente no es tan difícil.
Spock
6

Dentro de un controlador, el formato se puede filtrar inyectando $ filter.

var date = $filter('date')(new Date(),'MMM dd, yyyy');
Tjs
fuente
5

Simplemente, si desea obtener resultados como "30 de enero de 2017 4:31:20 PM", siga el paso simple

Paso 1: declara la siguiente variable en el controlador js

$scope.current_time = new Date();

paso2: muestra en la página html como

{{current_time | fecha: 'medio'}}

shani singh
fuente
5

podemos formatear la fecha en el lado de la vista en angular es muy fácil ... compruebe el siguiente ejemplo:

{{dt | fecha: "dd-MM-aaaa"}}

Rajat-Systematix
fuente
3

Puede usar momentjspara implementar el filtro de fecha y hora en angularjs. Por ejemplo:

angular.module('myApp')
 .filter('formatDateTime', function ($filter) {
    return function (date, format) {
        if (date) {
            return moment(Number(date)).format(format || "DD/MM/YYYY h:mm A");
        }
        else
            return "";
    };
});

Donde la fecha está en formato de marca de tiempo.

Rubi Saini
fuente
1

Agregar $filterdependencia en el controlador.

var formatted_datetime = $filter('date')(variable_Containing_time,'yyyy-MM-dd HH:mm:ss Z')
Aniket B
fuente
2
Si bien este fragmento de código puede resolver la pregunta, incluir una explicación realmente ayuda a mejorar la calidad de su publicación. Recuerde que está respondiendo la pregunta para los lectores en el futuro, y que esas personas podrían no conocer los motivos de su sugerencia de código. Por favor, también trate de no saturar su código con comentarios explicativos, ¡esto reduce la legibilidad tanto del código como de las explicaciones!
kayess
0

Te sugiero que uses moment.js, tiene un buen soporte para el formato de fecha de acuerdo con las configuraciones regionales.

cree un filtro que utilice internamente el método moment.js para formatear la fecha.

Rahul Tokase
fuente