0
192
Views¿Cómo mostrar la base de tiempo adecuada en la zona horaria del usuario?
Descripción:
Construí esta aplicación web para mi hijo como regalo recién nacido 🎁 el año pasado. Mi esposa y yo estamos obsesionados con eso desde entonces. Lo usamos mucho todos los días hasta ahora en nuestros teléfonos, tabletas, computadoras portátiles, televisores e incluso en nuestro refrigerador Samsung (solo se requiere Internet y navegador). Voy a lanzar esto a TODOS los padres en el mundo pronto * GRATIS . Pero ahora quiero permitir que mi sobrino y sobrina en Texas usen este tablero/aplicación web como prueba familiar. Tengo que admitir la zona horaria diff. En este momento solo es compatible con US ET, que es donde vivo.
Tablero de JJ
Vista de escritorio ( solo lectura )
https://mybabies.app/baby/a4b7efe4-9c2f-4c48-b5b1-cc516a8f027f?code=N0Vk90
Configuración:
Mi config/app.php actual se establece en 'timezone' => 'America/New_York', uso mucho moment.js en el front-end para mostrar toda mi lógica de fecha/hora.
Yo estaba pensando:
para tomar la entrada como +2 , +3 , y así sucesivamente .... para que pueda representar el tiempo en función de eso. Sé que tengo que tomar la zona horaria del usuario como entrada y almacenarla en la base de datos como: +2, +3, ... he hecho eso También puedo consultar qué usuario configuró también. Simplemente no sé qué hacer con ese TZ. Me temo que cambiaré mis códigos en muchos lugares...
¿Hay alguna manera de detectar al usuario TZ al igual que detectamos al usuario dateTime? ¿Debería considerar esa ruta en su lugar?
¿Cuáles son los pasos adecuados que debo tomar?
1 answers
Answer question0
Creo que de manera muy optimista... Tengo una zona horaria para trabajar en mi aplicación ahora. Muchas gracias a todos los comentarios de todos los de arriba, sin ustedes, nunca encontraré la mejor solución de trabajo para mi situación con cambios tan mínimos.
Interfaz
Primero, agregué 2 líneas de código, agarré la zona horaria del cliente
const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone; <<< ADDED : Line #1Como ya hice un ajax en el registro presionado de todos modos, solo necesito un campo más para el servidor
var data = {}; data.tz = timezone; <<< ADDED : Line #2back-end
En segundo lugar, con 5 líneas de código, puedo acceder a lo que envié desde FE para sobrescribir el created_at time.
$tz = $inputs['tz']; <<< ADDED : Line #3 $clientDate = new DateTime("now", new DateTimeZone($tz) ); <<< ADDED : Line #4 $clientTimestamp = $clientDate->format('Ymd H:i:s'); <<< ADDED : Line #5 $log = new BabyLog; $log->type = $type; $log->created_at = $clientTimestamp; <<< ADDED : Line #6 $log->updated_at = $clientTimestamp; <<< ADDED : Line #7 $log->save();Ahora
Mi base de datos almacenó la marca de tiempo correcta () según el dispositivo/navegador de mi cliente.
No se necesitan otros códigos, simplemente funciona.
Prueba
Cambié la fecha y la hora en mi iPhone de Chicago a New York de un lado a otro. Presioné iniciar sesión, se guardó y noté que mi interfaz mostraba la hora exacta según la zona horaria de mi cliente ahora.
Espero
esta publicación ayuda a alguien como yo que quiere que su aplicación web funcione globalmente con cambios mínimos en el código. Para ser muy específico en 7 líneas de códigos.