Saltar al contenido

Angular UI DatePicker ajustando la zona horaria

Encontramos la respuesta a esta escollo, al menos eso pensamos. Si presentas dudas déjanoslo saber en un comentario, para nosotros será un gusto ayudarte

Solución:

Tuve un problema muy similar hace un tiempo: quería almacenar fechas locales en el lado del servidor (es decir, solo aaaa-mm-dd y sin información de tiempo/tiempo), pero dado que Angular Bootstrap Datepicker usa el objeto JavaScript Date esto no fue posible (se serializa a una fecha y hora UTC string en el JSON como usted mismo descubrió).

Resolví el problema con esta directiva: https://gist.github.com/weberste/354a3f0a9ea58e0ea0de

Esencialmente, estoy reformateando el valor cada vez que se selecciona una fecha en el selector de fecha (este valor, un formato aaaa-mm-dd stringse almacenará en el modelo) y cada vez que se acceda al modelo para completar la vista, necesito envolverlo en un objeto Date nuevamente para que datepicker lo maneje correctamente.

Solución encontrada aquí: https://github.com/angular-ui/bootstrap/issues/4837#issuecomment-203284205

El problema de la zona horaria está solucionado.

Puedes usar:

ng-model-options="timezone: 'utc'"

Para obtener un selector de fecha sin cálculo de zona horaria.

EDITAR: Esta solución no funciona desde la versión 2.x, sin embargo funcionó perfectamente bien hasta entonces. No pude encontrar una solución alternativa y todavía estoy usando la versión 1.3.3.

EDICIÓN 2: Como señaló Sébastien Deprez en los comentarios a continuación, esto se ha corregido en la versión 2.3.1. Lo acabo de probar y funciona muy bien.


Primero, me gustaría señalar que el selector de fecha localizado de Bootstrap es estúpido e inútil, nadie necesita algo como esto, todo lo que realmente quiere es una fecha aaaa-MM-dd, no veo ningún sentido en localizar una fecha cuando no No necesito tiempo.

No trato de doblar el lado del cliente para que se ajuste a la zona horaria del servidor, eso es excesivo y no funciona. En cambio, lo que hago es dejar que el usuario trabaje en su zona horaria y formatear la fecha antes de enviarla al servidor de esta manera:

fields.date = dateFilter(trans.date, 'MM/dd/yy');

Esto asegura que todo lo que el usuario ve en el selector de fechas lo recibo en el lado del servidor. Crucial si me preguntas. Si necesita establecer fechas mínimas y máximas, simplemente configúrelas en la zona horaria del usuario de esta manera:

$scope.datepickerOptions.minDate = new Date(dateFilter(minDate, 'yyyy-MM-dd'T'00:00:00', serverTimezone));
$scope.datepickerOptions.maxDate = new Date(dateFilter(maxDate, 'yyyy-MM-dd'T'00:00:00', serverTimezone));

minDate y maxDate son fechas localizadas en el servidor y serverTimezone es el desplazamiento de la zona horaria del servidor (“+0500”, por ejemplo).

¡Espero que esto ayude!

Recuerda compartir esta noticia si te valió la pena.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *