Jquery datepickerは、最初の日付フィールドで選択された日付に基づいて2番目の日付フィールドで日付を制限し、逆も同様です

Question

Jquery datepickerは、最初の日付フィールドで選択された日付に基づいて2番目の日付フィールドで日付を制限し、

私は2つのテキストボックスFromDateとTodateを持っています 彼は最初に選択するフィールドに応じて、彼は2つのオプションfromdateとtodateを持っています。

ユーザーならば、第一には、FROMDATE EX（2017年6月15日）は、その後TODATEフィールドでFROMDATEで選択されたすべての以前の日付がブロックされ、TODATEフィールドが唯一のユーザーならば、将来の日付を

を選択することが可能になります選択1stはTodate ex（2017年6月15日）を選択し、Fromdateフィールドでは未来の日付はすべてブロックされ、Fromdateフィールドは過去の日付のみを選択することができます

別の例 fromdateが（2017年6月15日） todateは2017年6月15日より少ない日付を選択することはできません。todateは2017年6月15日の日付を選択するためにのみ利用できます。

TODATEは、その後、FROMDATEは、2017年6月15日より大きい日付を選択することができません（2017年6月15日）として選択されている場合は、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> 

Answer 1

あなたのために動作します：

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

Answer 2

私は解決策を持って 問題は、私の日付ピッカーのjqueryので ベルでしたOWのコードは、私が使用して、それは非常によく

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