There are 2 calendars from bootstrap 3, it is necessary that when choosing 2 dates, not less than 3 days were chosen, at the first start, as a sign, it turned out, but when changing, it is not clear. That is, if you change the "From" or "To" fields, there should be a check if the date range is less than 3, then set 3 dates to the minimum, and if the user chooses more then put what he chose. It is necessary, as it were, to prevent the user from selecting a range of less than 3 days.

$(function () { $('#datetimepicker1').datetimepicker({ minDate: moment(), defaultDate: moment(), format: 'DD.MM.YY' }); $('#datetimepicker2').datetimepicker({ format: 'DD.MM.YY', minDate: moment().add(3, 'days'), defaultDate: moment().add(3, 'days'), useCurrent: false }); $("#datetimepicker1").on("dp.change", function (e) { $('#datetimepicker2').data("DateTimePicker").minDate(e.date.add(3, 'days')); }); $("#datetimepicker2").on("dp.change", function (e) { $('#datetimepicker1').data("DateTimePicker").maxDate(e.date); }); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/> <div class="container"> <div class="row"> <div class='col-sm-6'> <div class="form-group"> <div class='input-group date' > С <input id='datetimepicker1' type='text' class="form-control" /> </div> <div class='input-group date'> По <input id='datetimepicker2' type='text' class="form-control" /> </div> </div> </div>

    1 answer 1

    I decided myself))) through moment.js

     $(function () { $('#datetimepicker1').datetimepicker({ minDate: moment(), defaultDate: moment(), format: 'DD.MM.YY' }); $('#datetimepicker2').datetimepicker({ format: 'DD.MM.YY', minDate: moment().add(3, 'days'), defaultDate: moment().add(3, 'days'), useCurrent: false }); $("#datetimepicker1").on("dp.change", function (e) { $('#datetimepicker2').data("DateTimePicker").minDate(e.date.add(3, 'days')); if(moment(e.date).isAfter($('#datetimepicker2').data("DateTimePicker").date())){ $ ('#datetimepicker2').data("DateTimePicker").date(e.date); } }); }); 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/> <div class="container"> <div class="row"> <div class='col-sm-6'> <div class="form-group"> <div class='input-group date' > С <input id='datetimepicker1' type='text' class="form-control" /> </div> <div class='input-group date'> По <input id='datetimepicker2' type='text' class="form-control" /> </div> </div> </div>