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
    el 14 mar. 2018 a las 0:25
  • @J.Castro siendo una respuesta, deberías publicarla abajo, no como comentario
    – Mariano
    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
    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. el 14 mar. 2018 a las 2:01
  • Muchísimas Gracias! por haberte tomado tu tiempo en ayudarme con este problema.
    – MSL
    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
    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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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