Problema con el <input type="time" /> y angularjs al enviar al Web Api, ayuda por favor.

[Nestor]

Que tal amigos de Alt Net

Sigo con mi proyecto de Sueldos y Jornales https://github.com/Nestornjrz/SueldosYjornales.

Pero tengo un problema cuando quiero enviar solo "hora" al Wep Api, por alguna razón, que no entiendo, si yo introduzco en el input por ejemplo 02:04, al mostrar el modelo me muestra con 3 horas mas de las que introduje.

Ejemplo: 02:04 me muestra Thu, 01 Jan 1970 05:04:00 GMT o 1970-01-01T05:04:00.000Z

No entiendo porque me muestra 3 horas mas, si alguien  pudiera ayudarme.

Para un ejemplo mas completo el formulario (FORM) que utilizo esta en este enlace dentro de github.

Desde ya gracias.

Atte.

Nestor Rodriguez

[Miguel Eduardo Román Martínez]

Que tal Nestor, asumo que tu configuración regional es de +3 horas, por ejemplo acá en Guatemala nuestra zona horaria es de -6 horas http://www.zeitverschiebung.net/es/timezone/america--guatemala por lo que si creo la variable fecha en javascript con zona horaria universal asi: var hora = new Date("1970-01-01T06:04:00.000Z"); y mi zona horaria es -6 JavaScript le va a restar 6 horas a esa fecha y si muestro la variable hora en la consola de javascript escribe Thu Jan 01 1970 00:04:00 GMT-0600 (Hora estándar, América Central) si te das cuenta le restó las 6 horas.

Lo que te recomiendo para manejar estos casos es que en javascript lo manejes así como te lo esta trabajando y que configures el serializador de json (en tu WebApiConfig.cs) para que trabaje con zona universal, creo que es algo así:

jsonFormatter.SerializerSettings.DateTimeZoneHandling = DateTimeZoneHandling.Utc;

entonces tu formulario enviará al controller la hora con este formato: 1970-01-01T05:04:00.000Z y así lo almacenaras en tu base de datos y así lo retornará tambien tu controller. Por último en tu javascript al crear nuevas fechas con var horas = new Date("1970-01-01T05:04:00.000Z") debería restarle las 3 horas que le suma siempre.

Espero que te ayude en algo mi comentario y no haber enredado mucho las cosas :)

Saludos,

Miguel.

--
Has recibido este mensaje porque estás suscrito al grupo "AltNet-Hispano" de Grupos de Google.
Para anular la suscripción a este grupo y dejar de recibir sus mensajes, envía un correo electrónico a altnet-hispan...@googlegroups.com.
Para publicar en este grupo, envía un correo electrónico a altnet-...@googlegroups.com.
Visita este grupo en http://groups.google.com/group/altnet-hispano.
Para acceder a más opciones, visita https://groups.google.com/d/optout.

[Nestor]

Que tal Miguel.

Excelente la información que me diste, es exactamente como dices.

Pero hice una pequeña variación en comparación de lo que me aconsejaste y me pareció que esta bien.

En ves de guardar en la base de datos con fechas UTC lo guarde con el formato "local", en C# el objeto DateTime tiene el método ToLocalTime() y lo utilice antes de guardar en la base de datos, así que la hora en que guardo en mi base de datos es realmente UTC-3 (Asuncion/Paraguay) y cuando el Web Api lo devuelve lo devuelve de nuevo como un UTC. 

Esto es "bueno" para mi pues dentro del input, al estar enlazado al modelo por alguna razón (que no se jeje) se muestra en formato "hora local" pero la propiedad, que muestra angular,  esta en UTC .Así que cuando envió viaja como UTC al WEB API pero  lo guardo como "local" en la base de datos y al recuperlo se envía de nuevo al browser como UTC y el input (enlazado con el modelo mediante angular) lo muestra de nuevo como "local".

No se si es la mejor manera pero funciona.

Ejemplo: en el Front-end

 <input type="time" id="horaSalidaManana"

                                               name="horaSalidaManana"

                                               class="form-control"

                                               ng-model="vm.historicoHorario.horaSalidaManana"

                                               ng-required="true" />

Archivo donde esta el input

En el input: 23:02 ==> se muestra "1970-01-01T02:02:00.000Z" en el modelo.

Ejemplo: en el Back-end

historicoHorarioDb.HoraSalidaManana = hhDto.HoraSalidaManana.Value.ToLocalTime();

Archivo donde uso el ToLocalTime

Llega como 02/01/1970 2:02:00 (kind UTC) ==> lo guardo como 01/01/1970 23:02:00 por medio de .ToLocalTime()

Al enviarlo al browser lo envia como "1970-01-02T02:02:00.000Z" pero como a mi no me interesa la parte DATE, estoy recuperando el mismo TIME.

Y bueno a quien le sirva y si alguien ve algún error en la forma en que lo estoy haciendo.

Desde ya gracias por la ayuda.

Atte.

Nestor

[Nestor]

Bueno amigos de AltNet.

Bueno, buscando y buscando al fin di con lo que creo es la respuesta definitiva y es como sigue:

En el Front-End

• En el input[date]:
  

 <input type="date" id="fechaIngreso"
                                           name="fechaIngreso"
                                           class="form-control"
                                           ng-model="vm.historicoIngresoSalida.fechaIngreso"
                                           placeholder="yyyy-MM-dd"
                                           ng-model-options="{timezone:'UTC'}"
                                           ng-required="true" />

• En el Filtro date de angularjs:
  

{{o.fechaIngreso | date:"dd/MM/yyyy":'UTC'}}

En el Back-End

• En el WebApiConfig.cs
  

jsonFormatter.SerializerSettings.DateTimeZoneHandling = DateTimeZoneHandling.Utc;

Con esto solucione el tema de ver con coerencia lo que puestra el input[date], lo que muestra el model de angularj y lo que se guarda en el SqlServer.

Espero le sirva a alguien.

Atte.

Nestor

[Kiquenet]

Muy bueno. Gracias por compartirlo. 

También puede ser útil la sección globalization en el web.config

  <!-- Especificamos el idioma y la codificación de los archivos por defecto. -->
        <globalization culture="es-ES" uiCulture="es-ES" enableBestFitResponseEncoding="false" enableClientBasedCulture="false" fileEncoding="UTF-8" requestEncoding="UTF-8" responseEncoding="UTF-8" responseHeaderEncoding="UTF-8" />