0

Tengo la siguiente vista:

$('#inicial, #final').datepicker({
  dateFormat: 'yy-mm-dd',
});

let $inicial = $('#inicial'),
  $final = $('#final');

$inicial.datepicker({
  beforeShowDay: $.datepicker.noWeekends
}).on('change', function() {
  $final.datepicker('option', 'minDate', $(this).val());
});

$final.datepicker({
  beforeShowDay: $.datepicker.noWeekends
}).on('change', function() {
  $inicial.datepicker('option', 'maxDate', $(this).val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">


<link srv="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
<link srv="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.es.min.css" / <div class="form-row">
<div class="col-md-4 mb-3">
  <label>FECHA INICIAL:</label>
  <input type="text" name="inicial" id="inicial" class="form-control" placeholder="aaaa-mm-dd">
</div>
<div class="col-md-4 mb-3">
  <label>FECHA FINAL:</label>
  <input type="text" name="final" id="final" class="form-control" placeholder="aaaa-mm-dd">
</div>
</div>

La idea es que el usuario seleccione un rango de fechas, pero sólo puede seleccionar máximo un rango de dos días; es decir, el campo input con id final puede contener la misma fecha que el campo inicial para establecer que sólo se está seleccionando un solo día o también final puede contener un día posterior a la fecha del campo inicial para establecer que se están seleccionando dos días.

Por el momento, lo único que he logrado establecer es que en el campo final no se puedan seleccionar fechas anteriores a la fecha seleccionada en el campo inicial. ¿Cómo podría lograr que también me bloquée las fechas que sobrepasen los dos días posteriores a la fecha seleccionada en el campo inicial? De antemano, muchas gracias.

4

1 respuesta 1

0

Capaz esto te puede ayudar.

Dejé deshabilitados los días de fin de semana, pero si deseas habilitarlos debes remover o comentar esta línea: daysOfWeekDisabled: [0, 6],.

Código JavaScript:

$("#inicial, #final").datepicker({
  dateFormat: "mm-dd-yy",
  daysOfWeekDisabled: [0, 6], // Deshabilita Sábado y Domingo
});

let $inicial = $("#inicial"),
  $final = $("#final");

$final.on("change", function () {
  
    //días que permitirá en el rango
    let limit = 2;

    //Identifico el día de la semana que se seleccionó en $inicial
  const selectedDay = new Date($inicial.val()).getDay();
  
  //Si el día fue jueves o viernes, el seteo rango a 4 días por los 2 de fin de semana
  if (selectedDay === 4 || selectedDay === 5) {
    limit = 4;
  }

  //Agrego los días de limit a la fecha seleccionada en $final para la comparación.
  const date = new Date($inicial.val());
  const dateLimit = date.setDate(date.getDate() + limit);

  //Si $final seleccionado es menor a $inicial o mayor a $inicial + limit, pongo fecha en blanco.
  if (
    new Date($final.val()) < new Date($inicial.val()) ||
    new Date($final.val()) > new Date(dateLimit)
  ) {
    $final.val("");
  }
});

Noté que estabas mezclando parámetros de Bootstrap datePicker con Jquery datePicker.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.