El filtro de fecha AngularJS se usa para convertir una fecha en un formato específico. Cuando no se especifica el formato de fecha, el formato de fecha predeterminado es ‘MMM d, yyyy’.
Sintaxis:
{{ date | date : format : timezone }}
Valores de parámetros: el filtro de fecha contiene parámetros de formato y zona horaria, que es opcional.
Algunos valores comunes utilizados en el formato son los siguientes:
- ‘yyyy’: define el año ej. 2019
- ‘yy’: define el año ej. 19
- ‘y’ – definir año ej. 2019
- ‘MMMM’: define el mes, ej. Abril
- ‘MMM’: define el mes, ej. Abr
- ‘MM’: define el mes, ej. 04
- ‘dd’ – define el día ej. 09
- ‘d’ – definir día ex. 9
- ‘hh’ – define la hora en AM/PM
- ‘h’ – define la hora en AM/PM
- ‘mm’ – definir minuto
- ‘m’ – definir minuto
- ‘ss’ – definir segundo
- ‘s’ – definir segundo
Algunos valores predefinidos para el formato son los siguientes:
- “breve” – equivalente a “M/d/yy h:mm a”
- “medio” – equivalente a “MMM d, yh:mm:ss a”
- «fecha corta»: equivalente a «M/d/yy» (5/7/19)
- “mediumDate” – equivalente a “MMM d, y” (7 de mayo de 2019)
- “longDate” – equivalente a “MMMM d, y” (7 de mayo de 2019)
- “fullDate” – equivalente a “EEEE, MMMM d, y” (martes 7 de mayo de 2019)
- “horario corto” – equivalente a “h:mm a” (2:35 AM)
- “hora media” – equivalente a “h:mm:ss a” (2:35:05 AM)
Ejemplo 1: este ejemplo muestra la fecha en el formato dado.
html
<!DOCTYPE html>
<html>
<head>
<title>Date Filter</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body>
<div ng-app="gfgApp" ng-controller="dateCntrl">
<p>{{ today | date : "dd.MM.y" }}</p>
</div>
<script>
var app = angular.module('gfgApp', []);
app.controller('dateCntrl', function($scope) {
$scope.today = new Date();
});
</script>
</body>
</html>
Producción:
07.05.2019
Ejemplo 2: Este ejemplo muestra la hora en el formato especificado.
html
<!DOCTYPE html>
<html>
<head>
<title>Date Filter</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body>
<div ng-app="gfgApp" ng-controller="dateCntrl">
<p>{{ today| date : 'mediumTime'}}</p>
</div>
<script>
var app = angular.module('gfgApp', []);
app.controller('dateCntrl', function($scope) {
$scope.today = new Date();
});
</script>
</body>
</html>
Producción:
2:37:23 AM
Ejemplo 3: Este ejemplo muestra la fecha en el formato especificado.
html
<!DOCTYPE html>
<html>
<head>
<title>Date Filter</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body>
<div ng-app="gfgApp" ng-controller="dateCntrl">
<p>{{ today| date }}</p>
</div>
<script>
var app = angular.module('gfgApp', []);
app.controller('dateCntrl', function($scope) {
$scope.today = new Date();
});
</script>
</body>
</html>
Producción:
May 7, 2019
Publicación traducida automáticamente
Artículo escrito por aman neekhara y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA