¿ como validar fecha inicio sea menor que fecha fin ?Datepicker Boostrap

publicado por: Anonymous

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',
});
});  

solución

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:

_x000D_

_x000D_

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));
  });

_x000D_

<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="">

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *