Cómo formatear la fecha en angularjs


143

Quiero formatear la fecha como mm/dd/yyyy. Intenté lo siguiente y nada de eso me funciona. Puede alguien ayudarme con esto?

referencia: ui-date

<input ui-date ui-date-format="mm/dd/yyyy" ng-model="valueofdate" /> 

<input type="date" ng-model="valueofdate" />

1
¿Has intentado eliminar por ui-date-format="mm/dd/yyyy"completo? Parece que el comportamiento predeterminado sin esta opción es lo que desea.
Lukas

¿Has probado moment.js?
Cétia

No, no lo he intentado moment.js. Mi servidor me devuelve la cadena Json 20140313T00: 00: 00. Intenté en ambos sentidos html5 input type date y ui-date-format. Eliminar ui-date-format dice que es una cadena que le da un formato.
usuario16

El uso $formattersy $parserspor esta respuesta resolvió mi problema similar.
Ross Rogers

puede usar filtros en html y también en javascript, consulte: stackoverflow.com/a/27615392/1904479
Kailas

Respuestas:


204

Angular.js tiene un filtro de fecha incorporado.

manifestación

// in your controller:
$scope.date = '20140313T00:00:00';

// in your view, date property, filtered with date filter and format 'MM/dd/yyyy'
<p ng-bind="date | date:'MM/dd/yyyy'"></p>

// produces
03/13/2014

Puede ver los formatos de fecha admitidos en la fuente del filtro de fecha .

editar :

Si está tratando de obtener el formato correcto en el selector de fecha (no está claro si está usando el selector de fecha o simplemente está tratando de usar su formateador), esas cadenas de formato compatibles están aquí: https://api.jqueryui.com/datepicker/


1
el servidor me devuelve '20140313T00: 00: 00 y quiero mostrar en formato mm / dd / aaaa en una entrada como esta - <input type = date "ng-model =" mydate ">
user16

No estoy seguro de por qué mi respuesta fue rechazada. Esta respuesta se toma casi textualmente de los documentos de Angular. La mención de las cadenas de formato jQueryUI datepicker se debe a que el módulo que se usa en la pregunta es ui-date, que depende de jQuery y jQueryUI. No hay nada incorrecto o engañoso en la respuesta.
Jim Schubert

No creo que el enlace jQuery UI sea correcto para las cadenas de formato. docs.angularjs.org/api/ng/filter/date parece ser más preciso.
TrueWill

@TrueWill OP pregunta específicamente sobre ui-date, que usa jQuery datepicker. El primer enlace en mi publicación enlaza con el código fuente que tiene las cadenas de formato compatibles con angular.
Jim Schubert

@ JimSchubert esta es mi cadena de fecha '2013-11-11 00:00:00' y no se convertirá | fecha: 'fecha larga', alguna sugerencia?
alphapilgrim

97

Si no tiene un campo de entrada, solo desea mostrar una fecha de cadena con un formato adecuado, simplemente puede elegir:

<label ng-bind="formatDate(date) |  date:'MM/dd/yyyy'"></label>

y en el uso del archivo js:

    // @Function
    // Description  : Triggered while displaying expiry date
    $scope.formatDate = function(date){
          var dateOut = new Date(date);
          return dateOut;
    };

Esto convertirá la fecha en cadena en un nuevo objeto de fecha en JavaScript y mostrará la fecha en formato MM / dd / aaaa.

Salida: 15/12/2014

Editar
Si está usando una fecha de cadena con el formato de cadena "2014-12-19 20:00:00" (pasado de un backend de PHP), entonces debe modificar el código en el siguiente: https://stackoverflow.com / a / 27616348/1904479

Agregar más
desde javascript puede configurar el código como:

$scope.eqpCustFields[i].Value = $filter('date')(new Date(dateValue),'yyyy-MM-dd');

en caso de que ya tenga una fecha, de lo contrario puede usar el siguiente código para obtener la fecha actual del sistema:

$scope.eqpCustFields[i].Value = $filter('date')(new Date(),'yyyy-MM-dd');

Para obtener más detalles sobre los formatos de fecha, consulte: https://docs.angularjs.org/api/ng/filter/date


27

Estoy usando esto y está funcionando bien.

{{1288323623006 | date:'medium'}}: Oct 29, 2010 9:10:23 AM
{{1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'}}: 2010-10-29 09:10:23 +0530
{{1288323623006 | date:'MM/dd/yyyy @ h:mma'}}: 10/29/2010 @ 9:10AM
{{1288323623006 | date:"MM/dd/yyyy 'at' h:mma"}}: 10/29/2010 at 9:10AM

esto no funciona para mí si paso un objeto JS Date. alguna sugerencia por qué?
Panshul

Debería funcionar solo para el formato de fecha donde la fecha está en milisegundos y en su caso la fecha está en Formato de fecha. Siga: w3schools.com/js/js_date_formats.asp
Ravindra

18

Esto no es exactamente lo que está pidiendo, pero podría intentar crear un campo de entrada de fecha en html como:

<input type="date" ng-model="myDate" />

Luego, para imprimir esto en la página que usaría:

<span ng-bind="convertToDate(myDate) | date:'medium'"></span>

Finalmente, en mi controlador, declaró un método que crea una fecha a partir del valor de entrada (que en Chrome aparentemente se analiza 1 día libre):

$scope.convertToDate = function (stringDate){
  var dateOut = new Date(stringDate);
  dateOut.setDate(dateOut.getDate() + 1);
  return dateOut;
};

Entonces ahí lo tienes. Para ver cómo funciona todo, vea el siguiente plunker: http://plnkr.co/edit/8MVoXNaIDW59kQnfpaWW?p=preview . ¡Mucha suerte!


11

Esto funcionará:

{{ oD.OrderDate.replace('/Date(','').replace(')/','') | date:"MM/dd/yyyy" }}

NOTA: una vez que los reemplace, la fecha / millis restante se convertirá en la forma dada.


por alguna razón mi campo está en este formato / Fecha (99999) / a, ¿sabes por qué?
Antonio Correia

9

ver dateAPI angular : API AngularJS: fecha


El angular - datefiltro:

Uso:

{{ date_expression | date  [: 'format']  [: 'timezone' ] }}


Exampe:

Código:

 <span>{{ '1288323623006' | date:'MM/dd/yyyy' }}</span>

Resultado:

10/29/2010

7

Yo uso filtro

.filter('toDate', function() {
  return function(items) {
    return new Date(items);
  };
});

luego

{{'2018-05-06 09:04:13' | toDate | date:'dd/MM/yyyy hh:mm'}}

3

Simplemente pase el formato de fecha UTC del código del lado del servidor al lado del cliente

y use la siguiente sintaxis:

 {{dateUTCField  +'Z' | date : 'mm/dd/yyyy'}}

 e.g. dateUTCField = '2018-01-09T10:02:32.273' then it display like 01/09/2018

1

Después de mirar todas las soluciones anteriores, la siguiente fue la solución más rápida para mí. Si está utilizando material angular:

 <md-datepicker ng-model="member.reg_date" md-placeholder="Enter date"></md-datepicker>

Para configurar el formato:

app.config(function($mdDateLocaleProvider) {
    $mdDateLocaleProvider.formatDate = function(date) {
        // Requires Moment.js OR enter your own formatting code here....
        return moment(date).format('DD-MM-YYYY');
    };
});

Editar: También debe configurar parseDate para escribir una fecha (a partir de esta respuesta Cambiar el formato de md-datepicker en Material angular )

$mdDateLocaleProvider.parseDate = function(dateString) {
    var m = moment(dateString, 'DD/MM/YYYY', true);
    return m.isValid() ? m.toDate() : new Date(NaN);
};

1
var app=angular.module('myApp',[]);
        app.controller('myController',function($scope){         
              $scope.names = ['1288323623006','1388323623006'];

        });

Aquí el nombre del controlador es "myController" y el nombre de la aplicación es "myApp".

<div ng-app="myApp" ng-controller="myController">
        <ul>
            <li ng-repeat="x in names">
                {{x | date:'mm-dd-yyyy'}}

            </li>

        </ul>
    </div>

El resultado se verá así: - * 29-10-2010 * 03-03-2013


0

Ok, el problema parece provenir de esta línea:
https://github.com/angular-ui/ui-date/blob/master/src/date.js#L106 .

En realidad, esta línea es el enlace con jQuery UI, que debería ser el lugar para inyectar el formato de datos.

Como puede ver, var optsno hay ninguna propiedad dateFormatcon el valor de ng-date-format como podría imaginar.

De todos modos, la directiva tiene una constante llamada uiDateConfigpara agregar propiedades opts.

La solución flexible (recomendada):

Desde aquí puede ver que puede insertar algunas opciones inyectando en la directiva una variable de controlador con las opciones de jquery ui.

<input ui-date="dateOptions" ui-date-format="mm/dd/yyyy" ng-model="valueofdate" />

myAppModule.controller('MyController', function($scope) {
    $scope.dateOptions = {
        dateFormat: "dd-M-yy"
    };
});

La solución codificada:

Si no desea repetir este procedimiento todo el tiempo, cambie el valor de uiDateConfigin date.js a:

.constant('uiDateConfig', { dateFormat: "dd-M-yy" })

0

Tuve el mismo problema y, como los comentarios anteriores, pensé que debía haber un método nativo en JavaScript. La cosa es new Date(valueofdate)devuelve un objeto Date.

Pero, consulte http://www.w3schools.com/js/js_date_formats.asp , la parte que dice cero a la izquierda. Una fecha de una cadena, por ejemplo, un eco de PHP, debe ser como:

$valueofdate = date('Y-n-j',strtotime('theStringFromQuery'));

Esto pasará una Cadena, por ejemplo: '1999-3-3'y JavaScript analizará un objeto con el formato correcto con

$scope.valueofdate = new Date(valueofdate);

<input ui-date ui-date-format="mm/dd/yyyy" ng-model="valueofdate" />
<input type="date" ng-model="valueofdate" />

Enlace a PHP para formatos de fecha: http://www.w3schools.com/php/func_date_date_format.asp .


0

ng-bind="reviewData.dateValue.replace('/Date(','').replace(')/','') | date:'MM/dd/yyyy'"

Use esto debería funcionar bien. :) Los campos reviewData y dateValue pueden modificarse según su parámetro, el resto puede dejarse igual


0
{{convertToDate  | date :  dateformat}}                                             
$rootScope.dateFormat = 'MM/dd/yyyy';

1
¿Por qué publicas comentarios con la misma línea que en tu respuesta? Y su respuesta es solo un código, ninguna explicación.
Pochmurnik

-1
// $scope.dateField="value" in ctrl
<div ng-bind="dateField | date:'MM/dd/yyyy'"></div>
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.