datetimepicker date validation using default dates

Question

I have 2 datetimepickers that I'm using and I'm setting the default date on each of them when the page loads. One is the start time (#datetimepicker1), the other is the end time (#datetimepicker2). I also have validation in place for when the time changes, it will validate that the end date is not less than the start date and the start date is not greater than the end date. However, this only works if you click and set a datetime on one of the datetimepickers and then go to change the second one. The default values are filled in but it doesn't seem to know those values exist because I can click on the end time one and it will allow me to set the timestamp to less than the start time picker. Once you manually select a timestamp on one, then the validation works. Is there a way for the validation to see the default dates?

@using (Html.BeginForm("Graph", "Home", FormMethod.Post))
        {
            <div class="form-group">
                <div class="container">
                    <div class='col-lg-4 text-center' style="text-align:center">
                        <label class="control-label col-md-2" style="width:40%" for="datetimepicker1">From Date:</label>
                        @Html.TextBoxFor(m => m.datetimepicker1, new { @class = "input-group date" })

                    </div>
                    <div class='col-lg-4' style="text-align:center">
                        <label class="control-label col-md-2" style="width:40%" for="datetimepicker2">To Date:</label>
                        @Html.TextBoxFor(m => m.datetimepicker2, new { @class = "input-group date" })
                    </div>
                    <div class='col-lg-4' style="text-align:center">
                        <button type="submit" class="btn btn-primary">
                            <span class="glyphicon glyphicon-search" aria-hidden="true"></span>&nbsp;Search
                        </button>
                    </div>
                </div>
            </div>
        }

Here's the script part for it:

<link rel="stylesheet" href="~/Content/bootstrap-datetimepicker.min.css">
<script src="~/Scripts/bootstrap-datetimepicker.min.js"></script>

<script type="text/javascript">
    $(function () {
        $('#datetimepicker1').datetimepicker({
            defaultDate: "@DateTime.Now.ToString("MM/dd/yyyy") 12:00:00 AM"
        });
        $('#datetimepicker2').datetimepicker({
            defaultDate: "@DateTime.Now.ToString("MM/dd/yyyy") 11:59:59 PM"
        });
        $("#datetimepicker1").on("dp.change", function (e) {
            $('#datetimepicker2').data("DateTimePicker").minDate(e.date);
        });
        $("#datetimepicker2").on("dp.change", function (e) {
            $('#datetimepicker1').data("DateTimePicker").maxDate(e.date);
        });
    });
</script>