Jquery的日期选择器基于在第一日期字段选择的日期和明智的限制在第二日期字段日期反之亦然

问题描述：

Jquery的日期选择器限制的日期在第二日期字段基于在第一日期字段和明智反之亦然（限制在第一日期字段的日期选择的日期基于第二个日期字段中的选定日期）Jquery的日期选择器基于在第一日期字段选择的日期和明智的限制在第二日期字段日期反之亦然

我有2个文本框FromDate和Todate 它取决于用户哪个字段他将首先选择，他有2个选项fromdate和todate。

如果用户第一次选择没有fromdate前（2017年6月15日），然后在TODATE领域都在没有fromdate选择以前的日期将被阻塞，TODATE场将只提供选择将来的日期

如果用户第一个选择TODATE前（2017年6月15日），然后在没有fromdate领域的所有将来的日期将被阻塞，如果没有fromdate是（2017年6月15日）选定为FROM日期字段将只提供给选择过去的日期

另一个例子然后TODATE将无法选择日期小于2017年6月15日，TODATE将只提供选择，然后15日期grteate六月2017

如果TODATE时（2017年6月15日）选为则没有fromdate将无法选择日期大于6月15日2017年，没有fromdate将只能选择日期少于6月15日2017年

下面是我的代码

<div class="input-group date" id="datetimepicker1"> 
             @Html.TextBoxFor(model => model.FromDate, "{0:d}", new { tabindex = "2", @class = "form-control" }) 
             <span class="input-group-addon" style="cursor: pointer;"> 
              <span class="fa fa-calendar"></span> 
             </span> 

            </div> 
<div class="input-group date" id="datetimepicker2"> 
             @Html.TextBoxFor(model => model.ToDate, "{0:d}", new { tabindex = "3", @class = "form-control" }) 
             <span class="input-group-addon" style="cursor: pointer;"> 
              <span class="fa fa-calendar"></span> 
             </span> 

            </div> 
<script> 
    $(document).ready(function() { 
    var date_input = $('#datetimepicker1'); //our date input has the name "date" 
    var container = $('.bootstrap-iso form').length > 0 ? $('.bootstrap-iso form').parent() : "body"; 
    var options = { 
     format: 'mm/dd/yyyy', 
     container: container, 
     todayHighlight: true, 
     autoclose: true, 
    }; 
    date_input.datepicker(options); 
}) 

$(document).ready(function() { 
    var date_input = $('#datetimepicker2'); //our date input has the name "date" 
    var container = $('.bootstrap-iso form').length > 0 ? $('.bootstrap-iso form').parent() : "body"; 
    var options = { 
     format: 'mm/dd/yyyy', 
     container: container, 
     todayHighlight: true, 
     autoclose: true, 
    }; 
    date_input.datepicker(options); 
}) 
</script>

是的，这是可能的，你是怎么试试？ –

http://jsfiddle.net/SirDerpington/PPSh3/3/这个小提琴是一些什么相似，但不完全是我的回答 –

答

下面的代码会为你工作：

$("#FromDate").datepicker({ 
     changeMonth: true, 
     changeYear: true, 
     yearRange: '-30:+1', 
     onSelect: function (dateText) { 
      //self.validateDate();    
     }, 
     onClose: function (selectedDate, instance) { 
      if (selectedDate !== '') {    
       var orginalDate = new Date(selectedDate); 
       var date = new Date(new Date(orginalDate).setMonth(orginalDate.getMonth() + 3)); 
       $("#ToDate").datepicker("option", "minDate", selectedDate); 
       $("#ToDate").datepicker("option", "maxDate", date); 


      } 
     } 
    }); 
    $("#ToDate").datepicker({ 
     changeMonth: true, 
     changeYear: true, 
     yearRange: '-30:+1',  

     onSelect: function (dateText) { 
      //self.validateDate(); 
     }, 
     onClose: function (selectedDate) { 
      var orginalDate = new Date(selectedDate); 
      var date = new Date(new Date(orginalDate).setMonth(orginalDate.getMonth() -3)); 
      $("#FromDate").datepicker("option", "minDate", date); 
      $("#FromDate").datepicker("option", "maxDate", selectedDate); 
     }   
    });

我曾试图与上面的代码工作因此未（或者可能是我会错过了什么）。可你请看我编辑的问题... –

答

我得到了解决问题是在我的日期选择器的jQuery BEL流是代码我使用和它的工作非常出色

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all">

<script> 

$(document).ready(function() { 
$('#from').datepicker(
    { 

     beforeShow: function() { 
      $(this).datepicker('option', 'maxDate', $('#to').val()); 
     } 
    }); 
$('#to').datepicker(
     { 
      defaultDate: "+1w", 
      beforeShow: function() { 
       $(this).datepicker('option', 'minDate', $('#from').val()); 
       if ($('#from').val() === '') $(this).datepicker('option'); 
      } 
     }); 
})

<div> 

    <label for="from">From</label> <input type="text" id="from" name="from" class="form-control datepicker" /> <label for="to">to</label> <input type="text" id="to" class="form-control datepicker" name="to" /> 
</div>

Jquery的日期选择器基于在第一日期字段选择的日期和明智的限制在第二日期字段日期反之亦然

相关推荐