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>