Bootstrap-Datepicker: Set minimum or maximum dates and disable days that are out of range.

Question

I have the following two DatePickers that I use in ASP.NetWebForm. I want to disable dates from the second DatePicker that were in the past than the date selected in the first DatePicker.

<script type="text/javascript">
$(document).ready(function () {            
    $("#FromDate").datepicker({
        autoclose: true,
        format: 'MM/dd/yyyy',
        todayHighlight: true,
        clearBtn: true,
        orientation: 'bottom'
    });
});

</script>
<script type="text/javascript">
$(document).ready(function () {            
    $("#ToDate").datepicker({
        autoclose: true,
        format: 'MM/dd/yyyy',
        todayHighlight: true,
        clearBtn: true,
        orientation: 'bottom'
    });
});
</script>

And the .aspx code:

<tr>
    <td class="auto-style1">
        From Date: 
    </td>
    <td rowspan="2" class="auto-style1">  
        <div class="form-group">  
        <%--<label for="usr">FromDate:</label> --%>                     
            <div class='input-group date' id='FromDate'>
                <asp:TextBox ID="TextBoxFromDate" runat="server" CssClass="form-control"/>
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
        <div class="form-group">
            <%--<label for="usr">ToDate:</label>--%>
            <div class="input-group date" id="ToDate">
                <asp:TextBox ID="TextBoxToDate" runat="server" CssClass="form-control"></asp:TextBox>
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div> 
        </div>
    </td>
</tr>

What to do?

Answer 1

I would suggest that you try to find a component that does this for you.

: , CSS .. ... , , a maxDate, () | | . ( : daterangepicker)

... , , , , / min/max...

onClick/onChange changeDate , , .

, untidy fiddle :

var allowedMin, allowedMax = 0;

var from = $("#FromDate").datepicker(opts)
  .on('changeDate', function(e) { 
    // set new min
    allowedMin = new Date(e.date);    

    // if we have no max yet, or one has been set
    if(!allowedMax || new Date(e.date) < allowedMax) { 
        // if we're in the allowed range update
        $('#from').html(e.date);
        $('#status').html('update allowed');
        return true;
    } else {    
        // ... otherwise reject
        $('#FromDate').datepicker('update', new Date($('#from').html()));
        $('#status').html('update prevented/reverted');
        return false;
    }
  });

var to = $("#ToDate").datepicker(opts)
  .on('changeDate', function(e) {
    allowedMax = new Date(e.date);    
    if(!allowedMin || new Date(e.date) > allowedMin) { 
        $('#to').html(e.date);
        $('#status').html('update allowed');
        return true;
    } else {
       $('#ToDate').datepicker('update', new Date($('#to').html()));
       $('#status').html('update prevented/reverted');
       return false;
    }
  });

Update:

, bootstrap-datepicker , , ( changeDates), min/max .