Untitled

avatar
unknown
plain_text
5 months ago
4.0 kB
4
Indexable
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formulario de País y Hora</title>
</head>
<body>
    <h1>Formulario de País y Hora</h1>

    <label for="pais">País:</label>
    <select id="pais" onchange="actualizarFechaHora()">
        <option value="America/Argentina/Buenos_Aires">Argentina</option>
        <option value="America/Montevideo">Uruguay</option>
        <option value="America/La_Paz">Bolivia</option>
        <option value="America/Santiago">Chile</option>
        <option value="America/Lima">Perú</option>
        <option value="America/Asuncion">Paraguay</option>
        <option value="America/Panama">Panamá</option>
        <option value="America/Guayaquil">Ecuador</option>
        <option value="America/Caracas">Venezuela</option>
        <option value="America/El_Salvador">El Salvador</option>
        <option value="America/Guatemala">Guatemala</option>
        <option value="America/Tegucigalpa">Honduras</option>
        <option value="America/Costa_Rica">Costa Rica</option>
        <option value="America/Santo_Domingo">República Dominicana</option>
    </select>

    <br><br>

    <label for="fechaHoraActual">Fecha y Hora Actual:</label>
    <input type="text" id="fechaHoraActual" readonly>

    <br><br>

    <label for="cpt">Fecha y Hora CPT:</label>
    <input type="datetime-local" id="cpt">

    <br><br>

    <label for="diferencia">Diferencia entre Fecha y Hora Actual y CPT:</label>
    <input type="text" id="diferencia" readonly>

    <br><br>

    <button onclick="actualizarDiferencia()">Aplicar cambios</button>

    <script>
        // Función para obtener la fecha y hora actual en la zona horaria seleccionada
        function actualizarFechaHora() {
            const pais = document.getElementById('pais').value;
            const fechaHoraActualInput = document.getElementById('fechaHoraActual');
            const cptInput = document.getElementById('cpt');

            // Obtiene la fecha y hora actual en la zona horaria seleccionada
            const ahora = new Date().toLocaleString('en-GB', {
                timeZone: pais,
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
                hour12: false // El formato se ajusta según el sistema
            });

            // Actualiza el campo de fecha y hora actual
            fechaHoraActualInput.value = ahora;

            // Sincroniza el CPT con la fecha y hora actual del país seleccionado
            const now = new Date().toISOString().slice(0, 16); // Formato ISO para datetime-local
            cptInput.value = now;
        }

        // Función para calcular la diferencia entre la fecha y hora actual y la de CPT
        function actualizarDiferencia() {
            const pais = document.getElementById('pais').value;
            const cptInput = document.getElementById('cpt').value;
            const fechaHoraActualInput = document.getElementById('fechaHoraActual').value;
            const diferenciaInput = document.getElementById('diferencia');

            // Convertimos la fecha y hora actual a un objeto Date
            const fechaActual = new Date(new Date().toLocaleString('en-US', { timeZone: pais }));
            const fechaCpt = new Date(cptInput);

            const diferenciaMs = Math.abs(fechaCpt - fechaActual);
            const diferenciaHoras = Math.floor(diferenciaMs / (1000 * 60 * 60));
            const diferenciaMinutos = Math.floor((diferenciaMs % (1000 * 60 * 60)) / (1000 * 60));

            diferenciaInput.value = `${diferenciaHoras} horas, ${diferenciaMinutos} minutos`;
        }

        // Inicializa la fecha y hora al cargar la página
        window.onload = actualizarFechaHora;
    </script>
</body>
</html>
Editor is loading...
Leave a Comment