防止在Bootstrap Datepicker中选择a to date

Question

I'm trying to build two Bootstrap datepickers from and to. But i need to alert the user if he enters a "to" date that is less then the chosen "from" date. Any help on how to do so? I tried capturing the values but with no success in alerting the user if chooses to

     <div class="well">
  <div id="from-datepicker" class="input-append date">
    <input data-format="dd/MM/yyyy hh:mm:ss" type="text"></input>
    <span class="add-on">
      <i data-time-icon="icon-time" data-date-icon="icon-calendar">
      </i>
    </span>
  </div>
</div>

<div class="well">
  <div id="to-datepicker" class="input-append date">
    <input data-format="dd/MM/yyyy hh:mm:ss" type="text"></input>
    <span class="add-on">
      <i data-time-icon="icon-time" data-date-icon="icon-calendar">
      </i>
    </span>
  </div>
</div>
        <!-- Load jQuery and bootstrap datepicker scripts -->
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
        <script src="js/bootstrap-datepicker.js"></script>
        <script src="js/bootstrap-datepicker.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script type="text/javascript">
$(function() {
    var today = new Date();

    $('#from-datepicker').datepicker({
      language: 'pt-BR',
      startDate: today
    });

     $('#to-datepicker').datepicker({
      language: 'pt-BR'
    });

    $('#from-datepicker').on('changeDate', function(ev){
    $(this).datepicker('hide');
    });

    $('#to-datepicker').on('changeDate', function(ev){
    $(this).datepicker('hide');
    });

    var from = $('#from-datepicker').val();
    alert(from);
});
        </script>

Answer 1

Using the date object you can get the expected result.

 $('#from-datepicker, #to-datepicker').on('changeDate', function(ev){
    $(this).datepicker('hide');
    //Do the empty validation if necessary
    if('' != jQuery("#from-datepicker").val() && '' != jQuery("#to-datepicker").val()){
    var to_date = new Date(jQuery("#from-datepicker").val());
    var from_date = new Date(jQuery("#to-datepicker").val());
       if(from_date.getTime() > to_date.getTime()){
          alert('to date should be after the from date')
       }
    }
  });

Answer 2

In order to be able to do arithmetic on the dates, you'll have to convert the values into Date format.

    var fromDate = new Date($('#from-datepicker').val());
    var toDate = new Date($('#to-datepicker').val());
    var delta = toDate - fromDate; //if the to date is less than the from date this value should be negative
    if(delta < 0){  
       alert("Date is invalid");
    }

This also will have to be at the top of your function so that it gets run first.