4

Buenas estoy haciendo un sistema de reservas (soy nuevo en esto). El único problema que tengo hasta ahora es que no se validar que la fecha "fin" se mayor a la fecha de Inicio. Alguien puede ayudarme? se que es algo sencillo pero estoy aprendiendo
HTML

<input type="text"  input" name="entrada" id="entrada" value=""> 
<input type="text"  input" name="salida" id="salida"value=""> 

DATEPICKER

 $(function () {    


$('#entrada').datepicker({

    format: "dd/mm/yyyy",
    language: 'es',
    startDate: '+5d',

     endDate: '+35d',

});
$('#salida').datepicker({

    format: "dd/mm/yyyy",
    language: "es",
    startDate: '+6d',
    endDate: '+36d',
});
});  
2
  • Buscando en Google encontre el siguiente post espero resuelva tus dudas.
    – J. Castro
    Commented el 14 mar. 2018 a las 0:25
  • @J.Castro siendo una respuesta, deberías publicarla abajo, no como comentario
    – Mariano
    Commented el 14 mar. 2018 a las 1:09

2 respuestas 2

3

bootstrap datepicker te permite configurar los inputs de tal manera que te puede llegar a evitar las validaciones de este tipo, lo cual muchas veces es mucho mejor para experiencia de usuario

como opción, podrías establecer esta configuración

var getDate = function (input) {
    return new Date(input.date.valueOf());
}

$('#entrada, #salida').datepicker({
    format: "dd/mm/yyyy",
    language: 'es'
});

$('#entrada').datepicker({
    startDate: '+5d',
    endDate: '+35d',
}).on('changeDate',
    function (selected) {
        $('#salida').datepicker('setStartDate', getDate(selected));
    });

$('#salida').datepicker({
    startDate: '+6d',
    endDate: '+36d',
}).on('changeDate',
    function (selected) {
        $('#entrada').datepicker('setEndDate', getDate(selected));
    });

como veras, haces uso del evento changeDate para cada input, para que el usuario no pueda sobrepasar las fechas de entrada y salida cuando va a realizar la selección

en este link puedes ver como funciona para tu ejemplo

Edit

Para poder seleccionar una fecha de inicio posterior a la fecha final actualiza el código a lo siguiente. aquí te dejo la documentación para que puedas utilizar los métodos del complemento

var getDate = function (input) {
    return new Date(input.date.valueOf());
}

$('#entrada, #salida').datepicker({
    format: "dd/mm/yyyy",
    language: 'es'
});

$('#salida').datepicker({
    startDate: '+6d',
    endDate: '+36d',
});

$('#entrada').datepicker({
    startDate: '+5d',
    endDate: '+35d',
}).on('changeDate',
    function (selected) {
        $('#salida').datepicker('clearDates');
        $('#salida').datepicker('setStartDate', getDate(selected));
    });

puedes ver como funciona actualizado para tu ejemplo:

var getDate = function(input) {
  return new Date(input.date.valueOf());
}

$('#entrada, #salida').datepicker({
  format: "dd/mm/yyyy",
  language: 'es'
});

$('#salida').datepicker({
  startDate: '+6d',
  endDate: '+36d',
});

$('#entrada').datepicker({
  startDate: '+5d',
  endDate: '+35d',
}).on('changeDate',
  function(selected) {
    $('#salida').datepicker('clearDates');
    $('#salida').datepicker('setStartDate', getDate(selected));
  });
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.css" rel="stylesheet" />
<input type="text" name="entrada" id="entrada" value="">
<input type="text" name="salida" id="salida" value="">

4
  • Muchas Gracias! es casi lo que necesitaba. solo que tengo un problema. supongamos que el cliente elige la fecha "inicio" sea 9 y la de "fin" el 11 pero luego se arrepiente quiere que la fecha de "inicio" sea el 15 no me lo permite porque esta bloqueda por fecha "fin". hay una forma de restablecer fecha "fin" o algo similar cuando fecha "inicio" se extendio mas de lo q tenia fecha "fin"?
    – MSL
    Commented el 14 mar. 2018 a las 1:31
  • ahí edite mi respuesta, también te deje el link del plugin para que puedas adaptar el código para el funcionamiento que necesites. Commented el 14 mar. 2018 a las 2:01
  • Muchísimas Gracias! por haberte tomado tu tiempo en ayudarme con este problema.
    – MSL
    Commented el 14 mar. 2018 a las 2:11
  • ultima pregunta la fecha "fin" tiene que comenzar un día posterior al de "inicio". Ahí en el código "inicio" tiene StarDate: '+5d' y "fin" tiene StarDate '+6d' pero no estaría reconociendo ese '+6d' empieza en '+5d' como "inicio". como podría solucionarlo?
    – MSL
    Commented el 14 mar. 2018 a las 3:23
1

puede utiliza el siguiente codigo para los rangos de fechas

$(function() {
  var dateFormat = "mm/dd/yy",
    from = $("#from")
    .datepicker({
      defaultDate: "+1w",
      changeMonth: true,
      numberOfMonths: 3
    })
    .on("change", function() {
      to.datepicker("option", "minDate", getDate(this));
    }),
    to = $("#to").datepicker({
      defaultDate: "+1w",
      changeMonth: true,
      numberOfMonths: 3
    })
    .on("change", function() {
      from.datepicker("option", "maxDate", getDate(this));
    });

  function getDate(element) {
    var date;
    try {
      date = $.datepicker.parseDate(dateFormat, element.value);
    } catch (error) {
      date = null;
    }

    return date;
  }
});
<title>jQuery UI Datepicker - Select a Date Range</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<label for="from">From</label>
<input type="text" id="from" name="from">
<label for="to">to</label>
<input type="text" id="to" name="to">

para mas informacion consulte el siguiente link https://jqueryui.com/datepicker/#date-range

ademas puede utilizar esta libreria https://fullcalendar.io/

2

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.