set datetimepicker's minimum date to another datetimepicker's selected date

Question

I have two textboxes: txtETCdatefrom and txtETCdateto having classes datetimepicker1 and datetimepicker2 respectively:

<asp:TextBox ID="txtETCdatefrom" runat="server" CssClass="form-control datetimepicker1 col-md-6"></asp:TextBox>
<asp:TextBox ID="txtETCdateto" runat="server" CssClass="col-md-6 datetimepicker2 form-control"></asp:TextBox>

I am using datetimepicker with date only format on both classes(It is working fine if i set minDate to any specific date or moment()). I want to set minimum date of datetimepicker2 to selected value of datetimepicker1 or value of txtETCdatefrom. My datetimepicker code is:

$('.datetimepicker1').datetimepicker({
                    format: 'DD/MM/YYYY',
                    minDate: moment(),
                });            
$('.datetimepicker2').datetimepicker({
                    format: 'DD/MM/YYYY',
                    //minDate: moment(),                   
                });

I searched about this and found answer for datepicker(using onSelect() function):

$('.datetimepicker1').datetimepicker({
             format: 'DD/MM/YYYY',
             minDate: moment(),
             onSelect: function (date) {
             var date1 = $('.datetimepicker1').datetimepicker('getDate');
             var date = new Date(Date.parse(date1));
             date.setDate(date.getDate() + 1);
             var newDate = date.toDateString();
             newDate = new Date(Date.parse(newDate));
             $('.datetimepicker2').datetimepicker("option", "minDate", newDate);
             }
       });
$('.datetimepicker2').datetimepicker({
                    format: 'DD/MM/YYYY',
                    //minDate: moment(),
                });

but it is not working for datetimepicker. I also tried beforeShow() function like:

$('.datetimepicker1').datetimepicker({
                    format: 'DD/MM/YYYY',
                    minDate: moment(),
                });
$('.datetimepicker2').datetimepicker({
                    format: 'DD/MM/YYYY',
                    //minDate: moment(),
                    beforeShow: function () {
                        $(".datetimepicker2").datetimepicker("option", {
                        minDate: $(".datetimepicker1").datetimepicker('getDate')
                        });
                    }
                });

but all vain. Also tried onSelectDate() and onShow() functions as suggested in Set max and min datetime in jquery datetimepicker don't know what m doing wrong. After including these functions in code the datetimepicker doesn't show up. All help will be appreciated. Thank you.

Answer 1

I follow the docs in datepicker official website.

$(function () {
       
       $('#datetimepicker1').datetimepicker({
                    format: 'DD/MM/YYYY',
                    minDate: moment(),
                });            
      
      
      $('#datetimepicker2').datetimepicker({
                    format: 'DD/MM/YYYY',
                });
      
      $("#datetimepicker1").on("dp.change", function (e) {
            var oldDate = new Date(e.date);
            var newDate = new Date();
            newDate.setDate(oldDate.getDate() + 1);

            $('#datetimepicker2').data("DateTimePicker").minDate(newDate);          
        });
      
    });

<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="https://cdn.bootcss.com/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" rel="stylesheet"/>
    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.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" />
                        <span class="input-group-addon">
                            <span class="glyphicon glyphicon-calendar"></span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row">
            <div class='col-sm-6'>
                <div class="form-group">
                    <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>
                </div>
            </div>
        </div>
    </div>


    <script src="https://cdn.bootcss.com/moment.js/2.18.1/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>