如何在boostrap datepicker中显示特定月份

Question

我使用日期选择器只有几个月的选项，但我需要显示这个日期选择器的几个月，如（5月，11月）

我使用以下代码：

$('.month-year').datepicker({
      format: "mm-yyyy",
      viewMode: "months", 
      minViewMode: "months"
})

当前输出

*仅在显示屏上显示月份（5月，11月）。

Answer 1

我不确定您是否只想让其他月份处于非活动状态或将其完全隐藏在日期选择器之外，所以我已经包含了这两个选项。该演示目前完全隐藏它们。

var monthsToShow = ['May', 'Nov'];

$('#example1').datepicker({
  format: "MM yyyy",
  minViewMode: 1,
  autoclose: true
}).on("show", function(event) {
  $(".month").each(function(index, element) {

    var el = $(element);

    // to make other months inactive use this:
    if ($.inArray(el.text(), monthsToShow) >= 0)
      el.removeClass('disabled');
    else
      el.addClass('disabled');

    // to hide inactive months use this:
    if ($.inArray(el.text(), monthsToShow) >= 0)
      el.show();
    else
      el.hide();    
  });
});

这是小提琴：http://jsfiddle.net/awv3cx4x/

Answer 2

你可以使用beforeShowDay事件监听器

$( "#datepicker" ).datepicker({
  beforeShowDay: disableSpecificWeekDays
});

var monthsToDisable = [1, 2, 3];

function disableSpecificWeekDays(date) {
    var month = date.getMonth();
    if ($.inArray(month, monthsToDisable) != -1) {
        return [false];
    }
    return [true];
}

DEMO

Answer 3

从@J Santosh尝试这个答案

https://stackoverflow.com/a/32103637/6952155

这是小提琴

http://jsfiddle.net/santoshj/z2v31Leo/3/

代码段

＆＃13;

＆＃13;

$(document).ready(function() {
    
    var dateStart = new Date();
dateStart.setDate(dateStart.getDate()-1);
    var dp = document.getElementById("datepicker1");

    $("#datepicker1").datepicker( {
        format: "mm-yyyy",
        startView: "months", 
        minViewMode: "months",
        startDate: dateStart,       
        datesDisabled: dp.dataset.datesDisabled.split()
    }).datepicker("setDate",null);
$("#datepicker1").on('changeMonth',function(date){
console.log(date.date.getMonth()+1);
})
});

＆＃13;

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>
<div class="modal-body">
 <div class="input-append date" id="datepicker1" data-date="Aug-2015" data-date-format="mm-yyyy" data-dates-disabled="Sep-2015,Oct-2015" style="display:inline-block; font-weight:bold;">
  Check In: <input  type="text" readonly="readonly" name="date1" >
  <span class="add-on"><i class="glyphicon glyphicon-calendar"></i></span>      
 </div>       
</div>  

＆＃13;

＆＃13;

＆＃13;