AngularJS proporciona dos formas diferentes de cambiar el formato de la fecha. Se puede lograr mediante los siguientes enfoques:
- Uso de enlace de plantilla HTML
- Usando JavaScript
Enlace de plantilla HTML: en este método, usamos el operador de canalización (|). Este operador de tubería ayuda a convertir un objeto de fecha, número según el formato requerido (esto incluye: formato estándar angular y formato definido por el usuario). En angular, los objetos de fecha se pueden modificar en función de cualquier formato, configuración regional y zona horaria mediante este operador. Formatea una fecha en un formato legible solamente.
Sintaxis:
{{ dateVariable | date [ : format [ : timezone [ : locale ] ] ] }}
Descripción de atributos:
| Atributo | Descripción |
|---|---|
| Formato | Tanto los formatos predefinidos como los definidos por el usuario se pueden utilizar en este atributo. El valor predeterminado de este parámetro es: ‘fecha media’. Parámetro opcional |
| Zona horaria | El valor predeterminado de la zona horaria es: la zona horaria del sistema local del usuario. Podemos proporcionar un valor como compensación (‘0530’) o UTC/GMT estándar (IST) o abreviatura de zona horaria continental de EE. UU. Parámetro opcional |
| Lugar | El valor predeterminado para la configuración regional es – ‘indefinido’. Por ejemplo, podemos configurarlo como – ‘en_US’. Parámetro opcional |
Ejemplo: En este ejemplo, estamos cambiando la fecha actual a diferentes formatos. Este formato de fecha incluye los formatos estándar y definidos por el usuario.
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="datCtrl">
<p>
Formatted Date with default parameters:
{{ dateValue | date }}
</p>
<p>
Formatted Date with standard filter (ShortDate):
{{ dateValue | date:'shortDate' }}
</p>
<p>
Formatted Date with standard filter (FullDate):
{{ dateValue | date:'fullDate' }}
</p>
<p>
Formatted date with user defined format:
{{ dateValue | date : "'today is ' MMMM d, y" }}
</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('datCtrl', function ($scope) {
$scope.dateValue = new Date();
});
</script>
</body>
</html>
Cuando ejecutamos el código, proporcionará la fecha actual en diferentes formatos.
Input Current Date: 24th March 2020
Producción:
Formatted Date with default parameters: Mar 24, 2020 Formatted Date with standard filter (ShortDate): 3/24/20 Formatted Date with standard filter (FullDate): Tuesday, March 24, 2020 Formatted date with user defined format:today is March 24, 2020
Como hemos visto, es bastante fácil trabajar con este operador de tuberías. Ahora vamos a echar un vistazo a la segunda aproximación.
Uso del controlador de JavaScript: este enfoque es útil si tiene una fecha en formato de string.
Sintaxis:
$scope.dateVariable = $filter('date')("dateString", "dateformat");
Ejemplo: Aquí, estamos usando un controlador angular para cambiar el formato de fecha. La fecha se pasa como una string y mediante el filtro $filter, que se usa para filtrar los elementos del objeto y la array. Le proporciona el subconjunto de una array original en el formato especificado.
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<title>
How to change the date format using AngularJS ?
</title>
</head>
<body>
<div ng-app="MyApp">
<div ng-controller="MyCtrl">
Input Date in String Format: {{myDate}}<br>
Output Date : {{myDateFiltered}}
</div>
</div>
<script>
var app = angular.module('MyApp', []);
app.controller('MyCtrl', ['$scope', '$filter',
function ($scope, $filter) {
$scope.myDate = new Date('2013/07/21');
$scope.myDateFiltered = $filter('date')
($scope.myDate, 'dd/MM/yy');
}]);
</script>
</body>
</html>
Producción:
Input Date in String Format: "2013-07-20T18:30:00.000Z" Output Date : 21/07/13