在引导日期选择器中禁用月份

Question

我正在尝试使用选项 datesDisabled 禁用日期选择器中的月份。根据文档，它应该通过以我用于日期选择器的格式传递一个字符串数组来工作，但我无法让它工作。

HTML：

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

Javascript：

var dateStart = new Date();
dateStart.setDate(dateStart.getDate()-1);

$( document ).ready(function() {
    var dp = document.getElementById("datepicker1");

    $("#datepicker1").datepicker( {
        format: "mm-yyyy",
        startView: "months", 
        minViewMode: "months",
        startDate: dateStart,
        datesDisabled: dp.dataset.datesDisabled.split()
    }).datepicker("setDate",null);

});

更新：

看起来这不会得到答复，所以我决定尝试通过查找所有月份并将它们更改为残疾人课程来做到这一点。问题是我无法检测到能够获取当前日历年份的点击。

日期选择器标头的 HTML：

  <tr>
   <th style="visibility: hidden;" class="prev">«</th>
   <th colspan="5" class="datepicker-switch">2015</th>
   <th style="visibility: visible;" class="next">»</th>
  </tr>

Javascript：

$("th.next:first").click(function(){
    var currentYear = $("th.datepicker-switch:first").html();
    console.log("current year is " + currentYear); // nothing happens here
});

检测日期选择器内元素点击的正确方法是什么？

Answer 1

您可以使用 datepicker 的 show 事件来禁用不可用月份：

var datesToDisable = $('#datepicker1').data("datesDisabled").split(',');
  // or...
  // var datesToDisable = ["Sep-2015", "Oct-2015"];

//var dateStart = new Date();
//dateStart.setDate(dateStart.getDate()-1);

$('#datepicker1').datepicker({
        format: "mm-yyyy",
        startView: "months", 
        minViewMode: "months",
        //startDate: dateStart
        //datesDisabled: dp.dataset.datesDisabled.split()
    }).on("show", function(event) {

  var year = $("th.datepicker-switch").eq(1).text();  // there are 3 matches

  $(".month").each(function(index, element) {
    var el = $(element);

    var hideMonth = $.grep( datesToDisable, function( n, i ) {
                  return n.substr(4, 4) == year && n.substr(0, 3) == el.text();
                });

    if (hideMonth.length)
      el.addClass('disabled');

/* To hide those months completely...
    if (hideMonth.length)
      el.hide();
*/
  });
});

这是一个例子：https://jsfiddle.net/zadaey92/1/

Answer 2

有类似的问题要禁用几个月，并使用beforeShowMonth 选项找到更短的解决方案：

var monthsToDisable = ['2019-09'];
$('#datepicker').datepicker({
    format: "yyyy-mm",
    startView: "months", 
    minViewMode: "months",
    beforeShowMonth: function(date) {
        var formattedDate = moment(date).format('YYYY-MM');
        return $.inArray(formattedDate, monthsToDisable) < 0;
    }
);

Answer 3

在 datepicker 插件中 datesDisabled 只接受日期，而不是 MONTHS。检查下面的代码

if (this.o.datesDisabled.length > 0 && $.grep(this.o.datesDisabled, function(d){ return isUTCEquals(date, d); }).length > 0) { cls.push('disabled', 'disabled-date'); }

因此，如果您以 sep-2015 格式传递一个月，则函数 isUTCEquals 将返回 false。所以月份不会被禁用。
上面的代码存在于下面的 JS 中。

最新版JS -> http://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/js/bootstrap-datepicker.js

检测日期选择器内的点击

这个插件有一些事件 -->http://bootstrap-datepicker.readthedocs.org/en/stable/events.html#events

例如：changeMonth 事件。

$("#datepicker1").on('changeMonth',function(date){ console.log(date.date.getMonth()+1); }) });

更新小提琴http://jsfiddle.net/santoshj/z2v31Leo/3/