Estamos tratando de mostrar / ocultar un número de teléfono en un sitio en la vista móvil solo dado el horario comercial de nuestro cliente.

Ex. Están abiertos de 9 a.m. a 5 p.m., de lunes a jueves, y el número debe mostrarse en todos los tamaños de navegador, sin embargo, cuando están cerrados por el resto del tiempo, el número no debe mostrarse en la vista móvil, sino que debe mostrarse en las ventanas gráficas de la tableta y el escritorio .

Aquí está el javascript que estamos utilizando, no formateado por días y horas todavía.

¿Cómo debemos hacer que esto funcione?

    var d = new Date();
    var dayOfWeek = d.getDay();
    var hour = d.getHours();
    var status = 'open';
    if (dayOfWeek > 2 && dayOfWeek < 6 && hour > 9 && hour < 20) {
    status='open';
    } else {
    status='closed';
    }
    if (status==='open') {
    document.getElementById("mobile-number-hide").style.display = 
    'block';
    } else {
    document.getElementById("mobile-number-hide").style.display = 
    'none';
    }
0
Rico Galassi 7 oct. 2019 a las 21:10

3 respuestas

La mejor respuesta

Hemos resuelto nuestra pregunta de codificación. Aquí están los resultados:

var d = new Date();
var central_d = d.toLocaleString("en-US", {timeZone: "America/Chicago"});
if (central_d.includes("PM")){
 var add_time = 12;
} else {
 var add_time = 0;
}
var dayOfWeek = d.getDay();
var hour = parseFloat(central_d.split(', ')[1].split(':')[0]);
var hour = hour + add_time;
var status = 'open';
if (dayOfWeek > 0 && dayOfWeek < 5 && hour >= 8 && hour <= 20  || dayOfWeek == 5 && hour >= 8 && hour <= 17 || dayOfWeek == 6 && hour >= 9 && hour <= 13){
    status='open';
} else {
    status='closed';
}
if (status==='open') {
    vwo_$("#mobile-number-hide").vwoCss({"visibility":"show"});
} else {
    vwo_$("#mobile-number-hide").vwoCss({"display":"none !important"});
}

La última declaración if else es JavaScript específico de VWO

0
Rico Galassi 11 oct. 2019 a las 12:52

El problema con el uso de Javascript es que el tiempo se basa en el navegador / zona horaria del visitante. Por lo tanto, las 9 p.m. en Australia no es lo mismo que las 9 p.m. en las Américas. En su lugar, podría usar PHP, lo que le tomará tiempo a su servidor. Asegúrese de que la zona horaria de su servidor esté configurada de acuerdo con la ubicación de la empresa.

Php:

<?php
function hideOnTime(){
    $hideOnTime = '';
        if (strtotime(date('H:i')) >= strtotime('06:00') && strtotime(date('H:i')) <=                strtotime('20:00')){
    $hideOnTime = 'none';
    } else {
        $hideOnTime = 'block';
    }
    return $hideOnTime;
    }
?>

Y este podría ser tu CSS en línea:

<style>
@media (max-width: 860px) {
.closed {
 display: <?php echo hideOnTime();?>;
}}
</style>
0
MistaPrime 7 oct. 2019 a las 20:09

cuando están cerrados por el resto del tiempo, el número no debe mostrarse en la vista móvil, sino que debe mostrarse en las ventanas de tabletas y computadoras de escritorio.

if (status==='open') {
    document.getElementById("mobile-number-hide").style.display = 
    'block';
    } else {
if ( window.innerWidth <  640 ) {
    document.getElementById("mobile-number-hide").style.display = 
    'none';
    }
}

La forma más sencilla en tu caso.

0
Hammed 7 oct. 2019 a las 18:35
58274986