在引导日期选择器中禁用月份 [英] Disabling months in bootstrap datepicker

问题描述

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

HTML:

<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;">签入:<input type="text" readonly="readonly" name="date1" ><span class="add-on"><i class="glyphicon glyphicon-calendar"></i></span>

Javascript:

var dateStart = new Date();dateStart.setDate(dateStart.getDate()-1);$( 文档 ).ready(function() {var dp = document.getElementById("datepicker1");$("#datepicker1").datepicker( {格式:mm-yyyy"，startView: "月",minViewMode: "月",开始日期:日期开始，日期禁用:dp.dataset.datesDisabled.split()}).datepicker("setDate",null);});

更新:

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

日期选择器标题的 HTML:

 <th style="可见性:隐藏;"class="prev">«<th colspan="5" class="datepicker-switch">2015</th><th style="可见性:可见；"class="next">»</tr>

Javascript:

$("th.next:first").click(function(){var currentYear = $("th.datepicker-switch:first").html();console.log("当前年份是" + currentYear);//这里什么也没发生});

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

解决方案

您可以使用日期选择器的 show 事件来禁用不可用月份:

var datesToDisable = $('#datepicker1').data("datesDisabled").split(',');//或者...//var dateToDisable = ["Sep-2015", "Oct-2015"];//var dateStart = new Date();//dateStart.setDate(dateStart.getDate()-1);$('#datepicker1').datepicker({格式:mm-yyyy"，startView: "月",minViewMode: "月",//开始日期:日期开始//datesDisabled: dp.dataset.datesDisabled.split()}).on("show", function(event) {var year = $("th.datepicker-switch").eq(1).text();//有 3 个匹配项$(".month").each(function(index, element) {var el = $(元素);var hideMonth = $.grep(datesToDisable, function( n, i ) {返回 n.substr(4, 4) == 年 &&n.substr(0, 3) == el.text();});如果(隐藏月份.长度)el.addClass('禁用');/* 完全隐藏那几个月...如果(隐藏月份.长度)el.hide();*/});});

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

I am trying to disable months in a datepicker using the option datesDisabled. According to the docs it should work by passing an array of strings in the format of what I'm using for the datepicker but I can't get it to work.

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

});

Update:

It doesn't look like this will get answered so I decided to try and do this by finding all of the months and changing them to the disabled class. The problem is that I can't detect the clicks to be able to get the year of the current calendar.

HTML of the datepicker header:

  <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
});

What's the correct way to detect clicks on elements inside of the datepicker?

解决方案

You can use the datepicker's show event to disable unavailable months:

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();
*/
  });
});

Here's an example: https://jsfiddle.net/zadaey92/1/

这篇关于在引导日期选择器中禁用月份的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！