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

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

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

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

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.


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


¡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


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

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

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


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


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.


1

Agregar $filterdependencia en el controlador.

var formatted_datetime = $filter('date')(variable_Containing_time,'yyyy-MM-dd HH:mm:ss Z')

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.

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.