防止在 Bootstrap Datepicker 中选择一个小于的日期答案

【问题标题】：Preventing choosing a to date less then from in Bootstrap Datepicker防止在 Bootstrap Datepicker 中选择一个小于的日期
【发布时间】：2016-04-13 16:26:10
【问题描述】：

我正在尝试构建两个 Bootstrap 日期选择器。但是我需要提醒用户如果他输入的“to”日期小于选择的“from”日期。关于如何做到这一点的任何帮助？我尝试捕获这些值，但没有成功提醒用户如果选择

     <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>

【问题讨论】：

标签： javascript jquery twitter-bootstrap datepicker

【解决方案1】：

使用日期对象可以获得预期的结果。

 $('#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')
       }
    }
  });

【讨论】：

确保该值来自 jQuery("#from-datepicker").val() 代码。
否则使用 jQuery("#from-datepicker").data('datepicker').getFormattedDate('dd/MM/yyyy'); 代码获取日期价值

【解决方案2】：

为了能够对日期进行算术运算，您必须将值转换为日期格式。

    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");
    }

这也必须位于函数的顶部，以便它首先运行。

【讨论】：