更新引導日期範圍Datepicker只允許結束日期在開始日期的財政年度內

Question

我想說這句話我知道很少的JavaScript。

我有一個使用日期範圍的自舉日期選擇器，從eternicode中選取。

我的目標是在startDate中選擇一天，然後讓endDate的日子只在startDate和startDate的財政年度之內或之後。

例子：

• 如果我選擇了2016年10月1日，將結束日期應在2017年9月30日

• 上限，如果我選擇了2017年1月12日，在結束日期應在九月上限出2017年第30

• 如果我選擇了2017年9月30日，結束日期的也應該是2017年9月30日

• 差不多，如果起始日期的月份是在[十月，十一月，十二月]然後 結束日期爲9月30日蓋出來（的startDate年+ 1），否則結束日期帽 了在9月30日（的startDate年）

在我reportWebpage.cshtml文件我有：

<div class="col-md-2"> 
    Date Range: 
</div> 
<div class="col-md-5" id="dateRangeContainer"> 
    <div class="input-daterange input-group" id="datepicker"> 
     @Html.TextBox("startDate", "", new { @class = "input-sm form-control", name= "startDate" }) 
     <span class="input-group-addon">to</span> 
     @Html.TextBox("endDate", "", new { @class = "input-sm form-control", name = "endDate" }) 
    </div> 
</div> 

在我related.js我有一個非常基本的日期選擇器設置：

$(function() { 
    $('#dateRangeContainer .input-daterange').datepicker({ 
     autoclose: true, 
     todayBtn: "linked", 
     clearBtn: true 
    }); 
}); 

我知道有一個datesDisable屬性可以設置，而它的功能是我想要的，它似乎是基於一個日期數組，這似乎是錯誤的想法。

作爲一項測試，我用以下所示替換了上面的datapicker js代碼。

如在此SO Answer我嘗試添加一個onSelect屬性只是#startDate日期選擇器，但我沒有收到來自嵌入式警報的響應，也不是谷歌Chrome瀏覽器的開發者工具擊打置於其上調試點：

$('#startDate').datepicker({ 
    onSelect: function() { 
     var date = $(this).datepicker('getDate'), 
      day = date.getDate(), 
      month = date.getMonth() + 1, // Offset the zero index to match normal month indexes 
      year = date.getFullYear(); 
     alert(day + '-' + month + '-' + year); 
    } 
}); 

我希望通過這樣做我至少可以開始構建一些if else循環或其他東西。

我很想弄清楚如何開始這個問題，所以任何幫助或建議將非常感激！

編輯1： 我想通了，試圖禁用一個巨大的日期範圍是考慮到這個問題的錯誤的方式，那我應該集中精力利用setStartDate和setEndDate性能。

使用一些組合的技巧，從這些所謂的答案：

• Bootstrap datepicker change minDate/startDate from another datepicker

• Print Var in JsFiddle（這是大多隻是一個幫手，給信貸，信貸是由於）

我將此JSFiddle一起混合：http://jsfiddle.net/wsodjsyv/203/

它現在的位置在哪裏，它是限制適當財政年度的工作。我只需要對其進行調整，以便在清除結束日期時，我可以將開始日期再次移至該點。現在需要刷新，如果我確定我想移動開始日期9月30日（無論選擇哪年）

Answer 1

這是我的新related.js有關日期選擇器的文件;與此代碼我能夠限制日期範圍開始日期的財政年度：

$(function() { 
    // Ranged datepickers 
    $('#dateRangeContainer .input-daterange').datepicker({ 
     autoclose: true, 
     todayBtn: "linked", 
     clearBtn: true 
    }); 

    $('#startDate').datepicker().on('changeDate', function(selected) { 
     var endDate_Bottom = null; 
     var endDate_Cap = null; 

     if (selected.date != null) { 
      endDate_Bottom = new Date(selected.date.valueOf()); 
      endDate_Cap = new Date(selected.date.valueOf()); 

      if (endDate_Bottom.getMonth() >= 9 && endDate_Bottom.getMonth() <= 11) { 
       endDate_Cap = new Date(endDate_Bottom.getFullYear() + 1, 8, 30); 
      } else { 
       endDate_Cap = new Date(endDate_Bottom.getFullYear(), 8, 30); 
      } 
     } 

     $('#endDate').datepicker('setStartDate', endDate_Bottom); 
     $('#endDate').datepicker('setEndDate', endDate_Cap); 
    }); 

    $("#endDate").datepicker().on('changeDate', function(selected) { 
     var startDate_Cap = null; 
     if (selected.date != null) { 
      startDate_Cap = new Date(selected.date.valueOf()); 
     } 
     $('#startDate').datepicker('setEndDate', startDate_Cap); 
    }).on('clearDate', function(selected) { 
     var startDate_Cap = null; 
     $('#startDate').datepicker('setEndDate', startDate_Cap); 
    }); 
}); 

我已經添加了當日期爲空，以避免被充滿錯誤控制檯日誌一些檢查時.valueOf（）被稱爲空的日期。

我還帶回dateRangeContainer塊來處理重複的選項並允許突出顯示日曆中選定日期範圍的樣式。