I have a datepicker which has the following configuration:
HTML:
<div class="input-group date">
<input type="text" id="datepick" class="form-control"/>
<span class="input-group-addon">
<i class="glyphicon glyphicon-calendar"></i>
</span>
</div>
JS:
var datesToDisable = ["2016-11-01","2016-08-01","2016-06-01",
"2016-05-01","2016-04-01","2015-12-01","2015-09-01"];
$('#datepick').datepicker({
format: 'yyyy-mm-dd',
minViewMode: 1, // 1 for months
maxViewMode: 2, // 2 for years
startDate: '-36m',
endDate: '+0m',
autoclose: true,
toggleActive: true
});
$('#datepick').datepicker('setDatesDisabled', datesToDisable);
Then later an async call retrieves an array of dates (here represented by the datesToDisable
variable) which are passed to the datepicker using the setDatesDisabled
method (as indicated on the last line of the code snippet), but it is not working, as the months for the passed dates are still selectable within the calendar.
Questions: Is this the correct way to set disabled months in the bootstrap datepicker calendar? Will I need to pass all dates within a month to disable a particular month?
You can check it in the following jsfiddle: http://jsfiddle.net/javlc/52g9xcz2/
You can use the datepicker's .on("show")
function to alter the display. I've used jQuery's grep
to find matches with your datesToDisable
array. If there are any matches then I apply the disabled
class to that element.
var datesToDisable = ["2016-11-01","2016-08-01","2016-06-01",
"2016-05-01","2016-04-01","2015-12-01","2015-09-01"];
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
$('#example1').datepicker({
format: 'yyyy-mm-dd',
minViewMode: 1, // 1 for months
maxViewMode: 2, // 2 for years
startDate: '-36m',
endDate: '+0m',
autoclose: true,
toggleActive: true}).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(0, 4) == year && months[parseInt(n.substr(5, 2)) - 1] == el.text();
});
if (hideMonth.length)
el.addClass('disabled');
/* To hide them...
if (hideMonth.length)
el.hide();
*/
});
});
JsFiddle example: https://jsfiddle.net/k144qmct/1/
Bootstrap setDatesDisabled
accepts only dates
and not months
. One solution that I'm develop is the following:
First of all, we have to create a new array: var dates=[]
.
For every item from datesToDisable
array, we need to push
into dates
all the dates from item month
.
var datesToDisable = ["2016-11-01","2016-08-01","2016-06-01",
"2016-05-01","2016-04-01","2015-12-01","2015-09-01"];
For instance, we have 2016-11-01
. You have to add all days
from November(11)
month.
For this, I used daysInMonth
method in order to find out the number of the days for a month.
function daysInMonth(month,year) {
return new Date(year, month, 0).getDate();
}
daysInMonth(2016,11,0) //30
And the last step is to pass
dates array to datesDisabled
property.
Here is working solution .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.