fechas - formato fecha hora angularjs
Usando el filtro de fecha AngularJS con fecha UTC (9)
¿Podría funcionar declarando el filtro de la siguiente manera?
app.filter(''dateUTC'', function ($filter) {
return function (input, format) {
if (!angular.isDefined(format)) {
format = ''dd/MM/yyyy'';
}
var date = new Date(input);
return $filter(''date'')(date.toISOString().slice(0, 23), format);
};
});
Tengo una fecha UTC en milisegundos que paso al filtro de fecha de Angular para el formateo humano.
{{someDate | date:''d MMMM yyyy''}}
Impresionante, excepto que someDate está en UTC y el filtro de fecha lo considera en hora local.
¿Cómo puedo decirle a Angular que someDate es UTC?
Gracias.
Aquí hay un filter que tomará una cadena de fecha O un objeto de fecha 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);
};
});
Asi que...
{{ anyDateObjectOrString | moment: ''format'': ''MMM DD, YYYY'' }}
se mostraría el 11 de noviembre de 2014
{{ anyDateObjectOrString | moment: ''fromNow'' }}
se mostraría hace 10 minutos
Si necesita llamar a varias funciones de momento, puede encadenarlas. Esto se convierte a UTC y luego formatea ...
{{ someDate | moment: ''utc'' | moment: ''format'': ''MMM DD, YYYY'' }}
Después de algunas investigaciones, pude encontrar una buena solución para convertir UTC a la hora local, echar un vistazo al violín. Espero que ayude
https://jsfiddle.net/way2ajay19/2kramzng/20/
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="MyCtrl">
{{date | date:''yyyy-mm-dd hh:mm:ss'' }}
</div>
<script>
function MyCtrl($scope) {
$scope.d = "2017-07-21 19:47:00";
$scope.d = $scope.d.replace(" ", ''T'') + ''Z'';
$scope.date = new Date($scope.d);
}
</script>
Parece que la gente de AngularJS está trabajando en la versión 1.3.0. Todo lo que necesita hacer es agregar : ''UTC'' después de la cadena de formato. Algo como:
{{someDate | date:''d MMMM yyyy'' : ''UTC''}}
Como puede ver en los docs , también puede jugar aquí: Ejemplo de Plunker
Por cierto, creo que hay un error con el parámetro Z, ya que todavía muestra la zona horaria local incluso con ''UTC''.
Pregunta similar here
Volveré a publicar mi respuesta y propondré una fusión:
La salida UTC parece ser motivo de cierta confusión: las personas parecen moment.js gravitativamente hacia moment.js .
Tomando prestado de esta answer , podría hacer algo como esto (es decir, usar una función de conversión que cree la fecha con el constructor UTC) sin moment.js:
controlador
var app1 = angular.module(''app1'',[]);
app1.controller(''ctrl'',[''$scope'',function($scope){
var toUTCDate = function(date){
var _utc = new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds());
return _utc;
};
var millisToUTCDate = function(millis){
return toUTCDate(new Date(millis));
};
$scope.toUTCDate = toUTCDate;
$scope.millisToUTCDate = millisToUTCDate;
}]);
modelo
<html ng-app="app1">
<head>
<script data-require="angular.js@*" data-semver="1.2.12" src="http://code.angularjs.org/1.2.12/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-controller="ctrl">
<div>
utc {{millisToUTCDate(1400167800) | date:''dd-M-yyyy H:mm''}}
</div>
<div>
local {{1400167800 | date:''dd-M-yyyy H:mm''}}
</div>
</div>
</body>
</html>
aquí está plunker para jugar con él
También tenga en cuenta que con este método, si usa la ''Z'' del filtro de fecha de Angular, parece que todavía imprimirá su desplazamiento de zona horaria local.
Se ha producido un error al respecto en el repo angular.js https://github.com/angular/angular.js/issues/6546#issuecomment-36721868
Si usa moment.js, usaría la función moment (). Utc () para convertir un objeto de momento en UTC. También puede manejar un buen formato dentro del controlador en lugar de la vista utilizando la función momento (). Format (). Por ejemplo:
moment(myDate).utc().format(''MM/DD/YYYY'')
También tiene la posibilidad de escribir un filtro personalizado para su fecha, que lo muestre en formato UTC. Tenga en cuenta que utilicé toUTCString() .
var app = angular.module(''myApp'', []);
app.controller(''dateCtrl'', function($scope) {
$scope.today = new Date();
});
app.filter(''utcDate'', function() {
return function(input) {
return input.toUTCString();
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="myApp" ng-controller="dateCtrl">
Today is {{today | utcDate}}
</div>
Una versión evolucionada de la solución ossek
El filtro personalizado es más apropiado, entonces puedes usarlo en cualquier parte del proyecto
archivo js
var myApp = angular.module(''myApp'',[]);
myApp.filter(''utcdate'', [''$filter'',''$locale'', function($filter, $locale){
return function (input, format) {
if (!angular.isDefined(format)) {
format = $locale[''DATETIME_FORMATS''][''medium''];
}
var date = new Date(input);
var d = new Date()
var _utc = new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds());
return $filter(''date'')(_utc, format)
};
}]);
en plantilla
<p>This will convert UTC time to local time<p>
<span>{{dateTimeInUTC | utcdate :''MMM d, y h:mm:ss a''}}</span>