Bootstrap Month-Year Picker

Question

我需要在Bootstrap模板中創建一個窗體，並添加幾個月份選擇器。我找到了一個插件來完成我所需要的功能，但是它是用jQuery的舊版本編寫的，因此會中斷...我無法回滾到以前的版本，因爲它會打破頁面上的其他插件。

我需要的是這裏：http://techbrij.com/month-range-picker-jquery-ui-datepicker 這是一個簡單的方法，只使用月/年選項來輸入日期範圍。它將用於選擇就業時間。任何人都可以引導我向正確的方向遷移到jQuery 2.1。*？

編輯2016-02-08 似乎衝突在於我的引導模板。我使用的模板是由Almsaeed工作室

AdminLTE這是以下所有步驟加載的jQuery/jQuery的UI

Answer 1

這似乎做工精細，我使用重構的例子後所獲取呈現遵循Jquery（版本2.1.3）和JqueryUI（版本1.11.2）的腳本url。讓您在關閉</body>標記之前在腳本標記中包含這兩個標記。原始代碼來自http://techbrij.com/month-range-picker-jquery-ui-datepicker的在線文章。

cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js

cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min .js文件

活生生的例子：http://codepen.io/larryjoelane/pen/jWeVPE

HTML：

<div style="text-align:center;"> 
<label for="from">From</label> 
<input type="text" id="from" name="from" readonly="readonly" /> 
<label for="to">to</label> 
<input type="text" id="to" name="to" readonly="readonly" /> 
<input type="button" id="btnShow" value="Show" /> 
</div> 

CSS：

.ui-datepicker-calendar { 

    display: none; 

    /*use the line below instead to override existing css*/ 
    /*display:none !important*/ 

} 

的JavaScript：

$("#from, #to").datepicker({ 
    changeMonth: true, 
    changeYear: true, 
    showButtonPanel: true, 
    dateFormat: 'MM yy', 
    onClose: function(dateText, inst) { 
    var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val(); 
    var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val(); 
    $(this).datepicker('setDate', new Date(year, month, 1)); 
    }, 
    beforeShow: function(input, inst) { 
    if ((datestr = $(this).val()).length > 0) { 
     year = datestr.substring(datestr.length - 4, datestr.length); 
     month = jQuery.inArray(datestr.substring(0, datestr.length - 5), $(this).datepicker('option', 'monthNames')); 
     $(this).datepicker('option', 'defaultDate', new Date(year, month, 1)); 
     $(this).datepicker('setDate', new Date(year, month, 1)); 
    } 
    var other = this.id == "from" ? "#to" : "#from"; 
    var option = this.id == "from" ? "maxDate" : "minDate"; 
    if ((selectedDate = $(other).val()).length > 0) { 
     year = selectedDate.substring(selectedDate.length - 4, selectedDate.length); 
     month = jQuery.inArray(selectedDate.substring(0, selectedDate.length - 5), $(this).datepicker('option', 'monthNames')); 
     $(this).datepicker("option", option, new Date(year, month, 1)); 
    } 
    } 
}); 
$("#btnShow").click(function() { 
    if ($("#from").val().length == 0 || $("#to").val().length == 0) { 
    alert('All fields are required'); 
    } else { 
    alert('Selected Month Range :' + $("#from").val() + ' to ' + $("#to").val()); 
    } 
}); 

Answer 2

代碼似乎在JQuery中2.1.4以做工精細用jQuery UI的1.11.4：https://jsfiddle.net/sLfga1jt/3/

有您確認您的腳本標記加載在適當的訂購？ Jquery腳本引用應該在Jquery-UI之前。

另外，通過在腳本標記中包含腳本標記（如示例中所示）或通過包裝在文檔中準備好或類似的函數以確保代碼在所有腳本之後運行，從而驗證腳本引用之後加載了來自http://techbrij.com/month-range-picker-jquery-ui-datepicker的JavaScript被加載：

<div style="text-align:center;"> 
    <label for="from">From</label> 
    <input type="text" id="from" name="from" readonly="readonly" /> 
    <label for="to">to</label> 
    <input type="text" id="to" name="to" readonly="readonly" /> 
    <input type="button" id="btnShow" value="Show" /> 
</div> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
<script> 
    $("#from, #to").datepicker({ 
     changeMonth: true, 
     changeYear: true, 
     showButtonPanel: true, 
     dateFormat: 'MM yy',    
     onClose: function(dateText, inst) { 
      var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val(); 
      var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();    
      $(this).datepicker('setDate', new Date(year, month, 1)); 
     }, 
     beforeShow : function(input, inst) { 
      if ((datestr = $(this).val()).length > 0) { 
       year = datestr.substring(datestr.length-4, datestr.length); 
       month = jQuery.inArray(datestr.substring(0, datestr.length-5), $(this).datepicker('option', 'monthNames')); 
       $(this).datepicker('option', 'defaultDate', new Date(year, month, 1)); 
       $(this).datepicker('setDate', new Date(year, month, 1));  
      } 
      var other = this.id == "from" ? "#to" : "#from"; 
      var option = this.id == "from" ? "maxDate" : "minDate";   
      if ((selectedDate = $(other).val()).length > 0) { 
       year = selectedDate.substring(selectedDate.length-4, selectedDate.length); 
       month = jQuery.inArray(selectedDate.substring(0, selectedDate.length-5), $(this).datepicker('option', 'monthNames')); 
       $(this).datepicker("option", option, new Date(year, month, 1)); 
      } 
     } 
    }); 
    $("#btnShow").click(function(){ 
     if ($("#from").val().length == 0 || $("#to").val().length == 0){ 
      alert('All fields are required'); 
     } 
     else{ 
      alert('Selected Month Range :'+ $("#from").val() + ' to ' + $("#to").val()); 
     } 
    }); 
</script>