DEV Community

FredyMendoza5307
FredyMendoza5307

Posted on

Contador de días hábiles entre 2 fechas

Este contador de días hábiles, cuenta exactamente cuantos días laborales posee de acuerdo al rango de fechas proporcionadas

--------- HTML CODE ---------

<div id="contador-dias">
  <label for="fecha-inicio">Fecha de inicio:</label>
  <input type="text" id="fecha-inicio" placeholder="DD/MM/AAAA" onkeyup="formatoFecha(this)">
  <br>
  <label for="fecha-fin">Fecha de fin:</label>
  <input type="text" id="fecha-fin" placeholder="DD/MM/AAAA" onkeyup="formatoFecha(this)">
  <br>
  <button onclick="calcularDias()">Calcular días hábiles</button>
  <br>
  <p id="resultado"></p>
</div>
Enter fullscreen mode Exit fullscreen mode

------- Javascript --------

function formatoFecha(input) {
  // Reemplaza cualquier caracter que no sea un número con una cadena vacía
  input.value = input.value.replace(/[^\d]/g, '');

  // Si la longitud de la cadena es mayor o igual a 2, agrega una barra después de los primeros dos números
  if (input.value.length >= 2) {
    input.value = input.value.slice(0, 2) + '/' + input.value.slice(2);
  }

  // Si la longitud de la cadena es mayor o igual a 5, agrega una barra después de los primeros cinco números
  if (input.value.length >= 5) {
    input.value = input.value.slice(0, 5) + '/' + input.value.slice(5);
  }
}

function calcularDias() {
  let fechaInicio = document.getElementById('fecha-inicio').value;
  let fechaFin = document.getElementById('fecha-fin').value;

  // Convierte las fechas en objetos de tipo Date
  fechaInicio = new Date(fechaInicio.split('/').reverse().join('-'));
  fechaFin = new Date(fechaFin.split('/').reverse().join('-'));

  // Calcula la diferencia en días hábiles
  let diasHabiles = 0;
  let fechaActual = new Date(fechaInicio);
  while (fechaActual <= fechaFin) {
    // Si la fecha actual es un día hábil, suma uno al contador
    if (fechaActual.getDay() !== 0 && fechaActual.getDay() !== 6) {
      diasHabiles++;
    }

    // Avanza la fecha actual al siguiente día
    fechaActual.setDate(fechaActual.getDate() + 1);
  }

  // Actualiza el resultado en el widget
  document.getElementById('resultado').textContent = `Días hábiles entre las fechas ingresadas: ${diasHabiles}`;

  // Agrega un enlace a ipparaguay.com.py al final del resultado
  let enlace = document.createElement('a');
  enlace.href = 'https://ipparaguay.com.py/';
  enlace.textContent = 'ipparaguay.com.py';
  document.getElementById('resultado').appendChild(document.createElement('br'));
  document.getElementById('resultado').appendChild(enlace);
}
Enter fullscreen mode Exit fullscreen mode

---- CSS --------

#contador-dias {
  font-family: Arial, sans-serif;
  font-size: 16px;
}

#contador-dias input[type="text"] {
  width: 150px;
  margin-right: 10px;
}

#contador-dias button {
  margin-top: 10px;
}

#contador-dias p {
  font-weight: bold;
  margin-top: 10px;
}
Enter fullscreen mode Exit fullscreen mode

Visita Mis Sitios:
Marcas de autos
Características
Números Romanos
Islas Maldivas
Linea del tiempo
ipparaguay
Guias Latinas
Tipo de Cambio
Marcas de coches
Que es Pro
Como hacer wiki
Código Postal

Top comments (0)