Bootstrap-Datepicker：最小または最大日付を設定し、範囲外の日を無効にします。

Question

私はASP.Net WebFormで次の2つのDatePickersを使用しています。私は、最初のDatePickerで選択された日付よりも過去の2番目のDatePickerの日付を無効にしたい。

<script type="text/javascript"> 
$(document).ready(function() {    
    $("#FromDate").datepicker({ 
     autoclose: true, 
     format: 'MM/dd/yyyy', 
     todayHighlight: true, 
     clearBtn: true, 
     orientation: 'bottom' 
    }); 
}); 

</script> 
<script type="text/javascript"> 
$(document).ready(function() {    
    $("#ToDate").datepicker({ 
     autoclose: true, 
     format: 'MM/dd/yyyy', 
     todayHighlight: true, 
     clearBtn: true, 
     orientation: 'bottom' 
    }); 
}); 
</script> 

そして.aspxのコードは次のとおりです。

<tr> 
    <td class="auto-style1"> 
     From Date: 
    </td> 
    <td rowspan="2" class="auto-style1"> 
     <div class="form-group"> 
     <%--<label for="usr">FromDate:</label> --%>      
      <div class='input-group date' id='FromDate'> 
       <asp:TextBox ID="TextBoxFromDate" runat="server" CssClass="form-control"/> 
       <span class="input-group-addon"> 
        <span class="glyphicon glyphicon-calendar"></span> 
       </span> 
      </div> 
     </div> 
     <div class="form-group"> 
      <%--<label for="usr">ToDate:</label>--%> 
      <div class="input-group date" id="ToDate"> 
       <asp:TextBox ID="TextBoxToDate" runat="server" CssClass="form-control"></asp:TextBox> 
       <span class="input-group-addon"> 
        <span class="glyphicon glyphicon-calendar"></span> 
       </span> 
      </div> 
     </div> 
    </td> 
</tr> 

何をしますか？

Answer 1

私は実際にあなたのためにこれを行うコンポーネントを試してみることをお勧めします。

たとえば、私はCSSスタイル&を適用することができるものを見つけようとしています。公開されている機能セットの一部として無効にしています...私が知っているように、

しかし、あなたはそれで別の道を行くにしたい場合は...あなたはロジックをエミュレートすることができます。：（daterangepickerこれはそれがあった）、必要に応じて年|ヶ月| maxDateとコンポーネントを（内部で）日を有効と無効になります供給私のコメントで述べたように、少なくとも最小/最大イベントに基づいた拒否/許可で...

アイデアは各カレンダーのフックe onClick/onChange、またはあなたのケースではchangeDateイベントと は、現在の最小または最大 の日付が過去または過去である場合にクリックを防止します。

下記これは本当に だらしない fiddleとコードサンプルを参照してください。

var allowedMin, allowedMax = 0; 

var from = $("#FromDate").datepicker(opts) 
    .on('changeDate', function(e) { 
    // set new min 
    allowedMin = new Date(e.date);  

    // if we have no max yet, or one has been set 
    if(!allowedMax || new Date(e.date) < allowedMax) { 
     // if we're in the allowed range update 
     $('#from').html(e.date); 
     $('#status').html('update allowed'); 
     return true; 
    } else {  
     // ... otherwise reject 
     $('#FromDate').datepicker('update', new Date($('#from').html())); 
     $('#status').html('update prevented/reverted'); 
     return false; 
    } 
    }); 

var to = $("#ToDate").datepicker(opts) 
    .on('changeDate', function(e) { 
    allowedMax = new Date(e.date);  
    if(!allowedMin || new Date(e.date) > allowedMin) { 
     $('#to').html(e.date); 
     $('#status').html('update allowed'); 
     return true; 
    } else { 
     $('#ToDate').datepicker('update', new Date($('#to').html())); 
     $('#status').html('update prevented/reverted'); 
     return false; 
    } 
    }); 

アップデート：私はブートストラップ日付ピッカーは、このように、あなたがdisabled datesの配列を設定することができます参照

新しいロジックは（それぞれのchangeDateで）あなたの最小/最大より前の任意の日付をそのコレクションに供給します。