Bootstrap Datetimepicker range on init issue

Question

Sometimes I've forms with precompiled dates (in these example: 06/02/2019).

<div class='input-group date' id='datetimepicker1'>
    <input type='text' class="form-control" value="06/02/2019"/>
    <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
    </span>
</div>
<div class='input-group date' id='datetimepicker2'>
    <input type='text' class="form-control" />
    <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
    </span>
</div>

I get an issue with bootstrap datetimepicker: when value already exist on page loading, the "blocking" function doesn't work:

$('#datetimepicker1').datetimepicker({
    format: 'DD/MM/YYYY'
});

$('#datetimepicker2').datetimepicker({
    format: 'DD/MM/YYYY',
    useCurrent: false //Important! See issue #1075
});

$("#datetimepicker1").on("dp.change", function (e) {
    $('#datetimepicker2').data("DateTimePicker").minDate(e.date);
});      

$("#datetimepicker2").on("dp.change", function (e) {
    $('#datetimepicker1').data("DateTimePicker").maxDate(e.date); //<-- it works only when I change date.
});

After first load page, when I'll try to chose a date on datetimepicker2, I'd like to have blocked already dates before 06/02/2019, but all date are available! It work only if I do changes in input fields.

See my fiddle: https://jsfiddle.net/omerts/8jpmkcr5/1/

Answer 1

As per Bootstrap Datetime Picker, you need to use minDate and maxDate while initializing Datetime picker.

$(function () {    
         var datetime1 = $('#datetime1').val() != "" ? new Date($('#datetime1').val()) : false;
         var datetime2 = $('#datetime2').val() != "" ? new Date($('#datetime2').val()) : false;
                $('#datetimepicker1').datetimepicker({
                maxDate: datetime2
                });
                
                $('#datetimepicker2').datetimepicker({
                  useCurrent: false, //Important! See issue #1075
                  minDate: datetime1
                });
                
                $("#datetimepicker1").on("dp.change", function (e) {
                  $('#datetimepicker2').data("DateTimePicker").minDate(e.date);
                });      
                
                $("#datetimepicker2").on("dp.change", function (e) {
                    $('#datetimepicker1').data("DateTimePicker").maxDate(e.date);
                });
            });

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>




<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/eonasdan-bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/eonasdan-bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker1'>
                    <input type='text' class="form-control" id="datetime1" value="02/05/2019" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
                <div class='input-group date' id='datetimepicker2'>
                    <input type='text' class="form-control" id="datetime2"  />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>