Bootstrap Datepicker datesDisabled 动态生成的数组不起作用
Bootstrap Datepicker datesDisabled with dynamic generated array not working
使用此代码段,我将 2 个日期之间的日期数组存储在变量 "disabled" 中,以禁用 bootstrap 日期选择器中的日期。
var startdate1 = $(".startdate1").text();
var enddate1 = $(".enddate1").text();
var daysBetweenDates = function(startdate1, enddate1) {
var now = startdate1, dates = [];
while (now.isBefore(enddate1) || now.isSame(enddate1)) {
dates.push(now.format("\"D.M.YYYY\""));
now.add('days', 1);
}
return dates;
};
var fromDate = moment(startdate1,"DD.MM.YYYY");
var toDate = moment(enddate1,"DD.MM.YYYY");
var results = daysBetweenDates(fromDate, toDate).join(', ');
$('#results').html(results);
var disabled = results;
前端的输出是:
"15.2.2018", "16.2.2018", "17.2.2018", "18.2.2018", "19.2.2018", "20.2.2018", "21.2.2018", "22.2.2018", "23.2 .2018", "24.2.2018", "25.2.2018", "26.2.2018"
只有当日期数组在我的日期选择器实例中被硬编码但其中没有变量时,Bootstrap 日期选择器才会禁用日期:
$('.bdates').datepicker({
format: "dd.mm.yyyy",
keyboardNavigation: false,
daysOfWeekDisabled: "2,3,4,5,6",
daysOfWeekHighlighted: "0,1",
calendarWeeks: true,
autoclose: true,
todayHighlight: true,
updateViewDate: false,
datesDisabled: disabled,
startDate: startdate,
endDate: enddate,
language: "de"
});
看看这个fiddlejsfiddle.net/8k1um9k9/
出了什么问题?有人可以给我一个解决方案吗?!
谢谢你!
你能试试下面更新的代码吗?所做的更改在代码中用 //Changed here
注释掉。基本上,您需要将日期数组传递给 datesDisabled
.
var daysBetweenDates = function (startdate1, enddate1) {
var now = startdate1, dates = [];
while (now.isBefore(enddate1) || now.isSame(enddate1)) {
dates.push(now.format("D.M.YYYY")); //Changed here
now.add('days', 1);
}
return dates;
};
var fromDate = moment(startdate1, "DD.MM.YYYY");
var toDate = moment(enddate1, "DD.MM.YYYY");
var results = daysBetweenDates(fromDate, toDate); //Changed here
var disabled = results; //Changed here
$('#results').html(results.join(', ')); //Changed here
//var disabled = results;
//this datepicker is not working with disabled dates variable
$('.bdate').datepicker({
format: "dd.mm.yyyy",
keyboardNavigation: false,
// forceParse: false,
daysOfWeekDisabled: "2,3,4,5,6",
daysOfWeekHighlighted: "0,1",
calendarWeeks: true,
autoclose: true,
todayHighlight: true,
//updateViewDate: false,
datesDisabled: disabled, //Changed here
startDate: startdate,
endDate: enddate,
//language: "de"
});
使用此代码段,我将 2 个日期之间的日期数组存储在变量 "disabled" 中,以禁用 bootstrap 日期选择器中的日期。
var startdate1 = $(".startdate1").text();
var enddate1 = $(".enddate1").text();
var daysBetweenDates = function(startdate1, enddate1) {
var now = startdate1, dates = [];
while (now.isBefore(enddate1) || now.isSame(enddate1)) {
dates.push(now.format("\"D.M.YYYY\""));
now.add('days', 1);
}
return dates;
};
var fromDate = moment(startdate1,"DD.MM.YYYY");
var toDate = moment(enddate1,"DD.MM.YYYY");
var results = daysBetweenDates(fromDate, toDate).join(', ');
$('#results').html(results);
var disabled = results;
前端的输出是: "15.2.2018", "16.2.2018", "17.2.2018", "18.2.2018", "19.2.2018", "20.2.2018", "21.2.2018", "22.2.2018", "23.2 .2018", "24.2.2018", "25.2.2018", "26.2.2018"
只有当日期数组在我的日期选择器实例中被硬编码但其中没有变量时,Bootstrap 日期选择器才会禁用日期:
$('.bdates').datepicker({
format: "dd.mm.yyyy",
keyboardNavigation: false,
daysOfWeekDisabled: "2,3,4,5,6",
daysOfWeekHighlighted: "0,1",
calendarWeeks: true,
autoclose: true,
todayHighlight: true,
updateViewDate: false,
datesDisabled: disabled,
startDate: startdate,
endDate: enddate,
language: "de"
});
看看这个fiddlejsfiddle.net/8k1um9k9/
出了什么问题?有人可以给我一个解决方案吗?! 谢谢你!
你能试试下面更新的代码吗?所做的更改在代码中用 //Changed here
注释掉。基本上,您需要将日期数组传递给 datesDisabled
.
var daysBetweenDates = function (startdate1, enddate1) {
var now = startdate1, dates = [];
while (now.isBefore(enddate1) || now.isSame(enddate1)) {
dates.push(now.format("D.M.YYYY")); //Changed here
now.add('days', 1);
}
return dates;
};
var fromDate = moment(startdate1, "DD.MM.YYYY");
var toDate = moment(enddate1, "DD.MM.YYYY");
var results = daysBetweenDates(fromDate, toDate); //Changed here
var disabled = results; //Changed here
$('#results').html(results.join(', ')); //Changed here
//var disabled = results;
//this datepicker is not working with disabled dates variable
$('.bdate').datepicker({
format: "dd.mm.yyyy",
keyboardNavigation: false,
// forceParse: false,
daysOfWeekDisabled: "2,3,4,5,6",
daysOfWeekHighlighted: "0,1",
calendarWeeks: true,
autoclose: true,
todayHighlight: true,
//updateViewDate: false,
datesDisabled: disabled, //Changed here
startDate: startdate,
endDate: enddate,
//language: "de"
});