Datetimepicker validation doesn't work

Question

I have a form with 2 datetimepciker: one is for start date, the other is for end date.

The validation is that when the start date is selected, the end date must greater or equal the start date.

I search on the Internet but my code doesn't work.

Here is my js function:

function formatFields() {
    $('#report_startDate').datepicker({
        format: 'mm/dd/yyyy',
        todayHighlight: true,
        autoclose: true,
        startDate: "01/01/1900",
        endDate: "01/01/2100"
    });
    $('#report_endDate').datepicker({
        format: 'mm/dd/yyyy',
        todayHighlight: true,
        autoclose: true,
        startDate: "01/01/1900",
        endDate: "01/01/2100"
    });
    $("#report_endDate").datepicker().on("dp.change", function (e) {
        $('#report_startDate').data("DateTimePicker").minDate(e.date);
    });
}

Here is my html of 2 date time picker:

 <table style="width: 100%">
        <tr>
            <td>
                <div class="form-group">
                    <label class="control-label col-sm-3" id="lb_report_startDate"></label>
                    <div class="col-sm-8 date">
                        <div class="input-group input-append date" id="report_startDate">
                            <input runat="server" type="text" class="form-control" name="report_startDate_datePicker" id="report_startDate_datePicker" />
                            <span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>
                        </div>
                        <span id="report_startDate_error" class="error-message">Wrong format MM/dd/yyyy.</span>
                    </div>
                </div>
            </td>
            <td>
                <div class="form-group">
                    <label class="control-label col-sm-3" id="lb_report_endDate"></label>
                    <div class="col-sm-8 date">
                        <div class="input-group input-append date" id="report_endDate">
                            <input runat="server" type="text" class="form-control" name="report_endDate_datePicker" id="report_endDate_datePicker" />
                            <span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>
                        </div>
                        <span id="report_endDate_error" class="error-message">Wrong format MM/dd/yyyy.</span>
                    </div>
                </div>
            </td>
        </tr>
    </table>

Anyone here can explain what's wrong with my code and how to solve the problem? Many thanks.

function formatFields() {
    $('#report_startDate').datepicker({
        format: 'mm/dd/yyyy',
        todayHighlight: true,
        autoclose: true,
        startDate: "01/01/1900",
        endDate: "01/01/2100"
    });
    $('#report_endDate').datepicker({
        format: 'mm/dd/yyyy',
        todayHighlight: true,
        autoclose: true,
        startDate: "01/01/1900",
        endDate: "01/01/2100"
    });
    $("#report_endDate").datepicker().on("dp.change", function (e) {
        $('#report_startDate').data("DateTimePicker").minDate(e.date);
    });
}

<table style="width: 100%">
        <tr>
            <td>
                <div class="form-group">
                    <label class="control-label col-sm-3" id="lb_report_startDate"></label>
                    <div class="col-sm-8 date">
                        <div class="input-group input-append date" id="report_startDate">
                            <input runat="server" type="text" class="form-control" name="report_startDate_datePicker" id="report_startDate_datePicker" />
                            <span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>
                        </div>
                        <span id="report_startDate_error" class="error-message">Wrong format MM/dd/yyyy.</span>
                    </div>
                </div>
            </td>
            <td>
                <div class="form-group">
                    <label class="control-label col-sm-3" id="lb_report_endDate"></label>
                    <div class="col-sm-8 date">
                        <div class="input-group input-append date" id="report_endDate">
                            <input runat="server" type="text" class="form-control" name="report_endDate_datePicker" id="report_endDate_datePicker" />
                            <span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>
                        </div>
                        <span id="report_endDate_error" class="error-message">Wrong format MM/dd/yyyy.</span>
                    </div>
                </div>
            </td>
        </tr>
    </table>

Answer 1

Try changing the below code in your js

$('#report_startDate').data("DateTimePicker").minDate(e.date);

to

$('#report_startDate').datepicker("option", "minDate", e.date);

Answer 2

I finally found the answer.

My function called wrong event of datetimepicker when it changed.

My function changed to:

function formatFields() {
    $('#report_startDate').datepicker({
        format: 'mm/dd/yyyy',
        todayHighlight: true,
        autoclose: true,
        startDate: "01/01/1900",
        endDate: "01/01/2100"
    }).on("changeDate", function (e) {
        $('#report_endDate').datepicker('setStartDate', e.date);
    });
    ;
    $('#report_endDate').datepicker({
        format: 'mm/dd/yyyy',
        todayHighlight: true,
        autoclose: true,
        startDate: "01/01/1900",
        endDate: "01/01/2100"
    });
}

And it works.

Reference: Bootstrap datepicker change minDate/startDate from another datepicker