Question

我需要将几个月份选择器添加到我在Bootstrap模板中创建的表单中。我发现一个插件可以完全满足我的需要，但它是用旧版本的jQuery编写的，因此中断...我无法回滚到以前的版本，因为它会破坏页面上的其他插件。

我需要的是：http://techbrij.com/month-range-picker-jquery-ui-datepicker 这是使用仅月/年选项输入日期范围的简单方法。它将用于选择就业期。任何人都可以引导我朝着正确的方向将其迁移到jQuery 2.1。*？

编辑2016-02-08 似乎冲突在于我的bootstrap模板。我正在使用的模板是Almsaeed Studio的AdminLTE

这是在完成加载jquery / jquery-ui的所有步骤之后呈现的内容

Answer 1

它似乎工作正常，我使用以下脚本url为Jquery（版本2.1.3）和JqueryUI（版本1.11.2）重建了一个示例。在结束</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-UI 1.11.4，代码似乎在JQuery 2.1.4中运行良好：https://jsfiddle.net/sLfga1jt/3/

您是否验证过您的脚本代码是否按正确顺序加载？ Jquery脚本引用应该在Jquery-UI之前。

还要验证在脚本引用之后加载来自http://techbrij.com/month-range-picker-jquery-ui-datepicker的javascript，方法是在jquery之后包含在脚本标记中（如示例所示），或者通过包装文档就绪或类似函数来确保代码运行之后加载了所有脚本：

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

Bootstrap月 - 年选择器

2 个答案: