禁用引导日期戳的月份 [英] Disabling months in bootstrap datepicker
问题描述
我尝试使用datesDisabled选项在日期戳中禁用月份。根据文档,它应该通过传递一个字符串数组,以我正在使用的datepicker的格式,但我无法使其工作。
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:
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);
});
更新:
看起来不会这样回答,所以我决定尝试这样做,找到所有的月份,并把它们变成残疾人的班级。问题是我无法检测到能够获得当前日历年份的点击次数。
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.
datepicker标题的HTML:
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:
Javascript:
$("th.next:first").click(function(){
var currentYear = $("th.datepicker-switch:first").html();
console.log("current year is " + currentYear); // nothing happens here
});
检测datepicker元素点击的正确方法是什么?
What's the correct way to detect clicks on elements inside of the datepicker?
推荐答案
您可以使用datepicker的 show
事件来禁用不可用的月份:
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();
*/
});
});
这里有一个例子: https://jsfiddle.net/zadaey92/1/
这篇关于禁用引导日期戳的月份的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!