javascript - fechas - ¿Cómo enviar el valor del selector de fecha AngularStrap sin zona horaria?

fechas en javascript

Question

Me pregunto si es posible usar el selector de fechas de AngularStrap sin que se mantenga la información de la zona horaria del entorno local del usuario. En nuestra aplicación, queremos manejar los objetos del Contrato que tienen una fecha de vencimiento.

Al agregar o editar el objeto del contrato, hay un campo de selección de fecha para seleccionar la fecha. Sucede lo siguiente:

1. El usuario selecciona la fecha (p. Ej., 2013-10-24)
2. Angular enlaza el objeto de fecha javascript al campo ng-model
3. El objeto de fecha enlazada está en la zona horaria del usuario (por ejemplo, GMT + 3)
4. El usuario envía el formulario.
5. La fecha se envía al servidor utilizando el servicio $ http de Angular

En el paso 5, la fecha se convierte a formato UTC. La fecha seleccionada fue GMT + 3 2013-10-24 a la medianoche, pero la conversión UTC cambia la fecha a 2013-10-23 a las 9 pm.

¿Cómo podríamos evitar la conversión o utilizar las fechas UTC durante todo el proceso? No queremos que la fecha del contrato cambie según la zona horaria local del usuario. En su lugar, queremos que la fecha sea siempre 2013-10-24, sin importar la zona horaria.

Nuestra solución actual fue hacer pequeños cambios en la biblioteca de AngularStrap para que la fecha no cambie cuando se envíe al servidor.

Si pudiéramos obtener la zona horaria seleccionada del usuario en el servidor, podríamos hacer otra conversión allí, pero el servidor no tiene esa información.

Todas las ideas son apreciadas!

Answer 1

El problema no es AngularStrap. Es solo cómo funcionan las fechas de javascript y cómo JSON las formatea para su transmisión. Cuando convierte un objeto de fecha javascript en una cadena JSON, formatea la cadena como UTC.

Por ejemplo, estoy en Utah y ahora es 07:41 en 2013-10-24. Si creo una nueva fecha de javascript y la imprimo en la consola, dirá:

Thu Oct 24 2013 07:41:19 GMT-0600 (MDT)

Si encadeno esa misma fecha (usando JSON.stringify(date) , obtengo:

"2013-10-24T13:41:47.656Z"

Lo que puedes ver no está en mi zona horaria actual, pero está en UTC. Entonces, la conversión se produce justo antes de que el formulario se envíe al servidor cuando se convierte de un objeto javascript a una cadena JSON.

La forma más fácil de hacerlo sería simplemente cambiar la fecha a una cadena de su propia elección antes de enviar la fecha al servidor. Entonces, en lugar de dejar que JSON cambie la fecha a UTC, (suponiendo que no te importe la hora del día), podrías hacer algo como esto:

var dateStrToSend = $scope.date.getUTCFullYear() + ''-'' + ($scope.date.getUTCMonth() + 1) +  ''-'' + $scope.date.getUTCDate();

Eso le dará una cadena basada en UTC que parece ''2013-10-24'' y luego puede enviarla al servidor, en lugar del formato JSON que incluye la información de tiempo. Esperemos que eso ayude.

ACTUALIZACIÓN: Como dijo @Matt Johnson, hay dos formas de hacerlo. Usted dijo: How could we prevent the conversion, or use UTC dates during the whole process? . Si desea utilizar UTC, utilice mi explicación anterior. Si solo quiere "evitar la conversión", puede usar lo siguiente:

var dateStrToSend = $scope.date.getFullYear() + ''-'' + ($scope.date.getMonth() + 1) +  ''-'' + $scope.date.getDate();

Answer 2

La "forma Angular" es usar el servicio $ filter para formatear la fecha devuelta por el selector de fecha.

Ejemplo (HTML):

{{inpDate | date: ''dd-MM-yyyy''}}

Ejemplo (JS):

$scope.processDate = function(dt) {
return $filter(''date'')(dt, ''dd-MM-yyyy'');
}

Plunker here

Answer 3

Un poco tarde, pero pasé mi tarde en esto y alguien podría encontrarlo útil.

Otra forma de hacer esto de forma declarativa es usar los atributos dateType, dateFormat y modelDateFormat. Póngalos en la configuración o en el HTML, por ejemplo

angular.module(''app'').config(function ($datepickerProvider) {
    angular.extend($datepickerProvider.defaults, {
        dateFormat: ''dd-MMMM-yyyy'',
        modelDateFormat: "yyyy-MM-ddTHH:mm:ss",
        dateType: "string"
    });
});

DateFormat es el formato en que se mostrará la fecha al usuario en el selector de fechas, mientras que modelDateFormat es el formato al que se convertirá antes de vincularse a su modelo.

También tenía valores predeterminados provenientes del servidor, que necesitaba vincularse al selector de fecha en la carga de la página. Por lo tanto, tuve que actualizar el formato de las fechas de serialización del servidor en JSON para que coincidiera con el modelo de datos de formato. Estoy usando la API web, así que usé la siguiente.

var jsonSettings = Formatters.JsonFormatter.SerializerSettings;
jsonSettings.DateFormatString = "yyyy-MM-ddTHH:mm:ss";