防止在Bootstrap Datepicker中选择a to date

时间:2016-04-13 16:26:11

标签: javascript jquery twitter-bootstrap datepicker

我试图建立两个Bootstrap日期选择器。但我需要提醒用户,如果他进入"到#34;日期小于所选择的"来自"日期。有关如何操作的任何帮助? 我尝试捕获值但是如果选择则不会提醒用户

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

1 个答案:

答案 0 :(得分:0)

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

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

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