Estoy tratando de ocultar/mostrar un elemento basado en el tiempo.
Lo único es que esto debe ser independientemente de la zona horaria .
Por ejemplo, si tengo un evento a las 8 AM hora de Nueva York, ¿cómo puedo ocultar un elemento a esa hora (sin importar dónde se encuentre el usuario)?
Estoy agregando este sandbox inicial: https://codesandbox.io/s/ny-event-time-rp34ml?file=/src/index.js
¡Gracias!
Debe tomar la hora actual, luego convertirla a su zona horaria objetivo (Nueva_York), luego verificar si la hora actual del usuario está en su rango de eventos y...
Tenga en cuenta que esto solo funciona si los relojes del usuario en su dispositivo están configurados correctamente. De lo contrario, debe obtener la hora actual a través de una API (hay algunas API gratuitas que hacen esto por usted, pero si tiene un servidor/host, yo sugiera hacer uno para usted mismo para hacer su trabajo)
Más explicaciones proporcionadas como comentarios.
// function to convert current user local time to another time zone function getTime(timeZone, date = new Date()) { return new Date( date.toLocaleString("en-US", { timeZone, }) ); } const nyc = getTime("America/New_York"); // current New_York date // get current day/month/year const [month, day, year] = nyc.toLocaleString("en-US").split(", ")[0].split("/"); // get current time const currentTime = getTime("America/New_York").getTime(); /* you can change the event time here eg if you wanna event start at 10:05:30 pm try this const eventTime = new Date(+year, month - 1, +day, 22, 05, 30).getTime(); */ const eventTime = new Date(+year, month - 1, +day, 8, 0, 0).getTime(); const beforeEvent = eventTime - 900000; // 15 min before event start const afterEvent = eventTime + 3600000; // 60 min after event start const beforeElement = document.querySelector(".before"); const startElement = document.querySelector(".start"); const afterElement = document.querySelector(".after"); // hides all elements by default [beforeElement, startElement, afterElement].forEach((e) => (e.style.display = "none")); // do stuff before event starts if (currentTime < beforeEvent) { // display beforeElement before event starts beforeElement.style.display = "block"; } // do stuff during event if (currentTime >= beforeEvent && currentTime <= afterEvent) { // display startElement during event startElement.style.display = "block"; } // do stuff after event ends if (currentTime > afterEvent) { // display afterElement after event ends afterElement.style.display = "block"; } <p class="before">Before Event</p> <p class="start">Event Started</p> <p class="after">After Event</p>