我正在使用 eyecon 的 Bootstrap Datepicker 插件,可以在此处找到 - http://www.eyecon.ro/bootstrap-datepicker/
我正在尝试使用 onRender
事件来禁用许多日期的选择。我需要禁用今天之后的所有日期( future 日期)的 checkin 和 checkout 。结账还需要任何等于或早于 checkin 禁用的日期。尽管结帐根本无法工作,但 checkin 工作正常。
很确定问题是我没有正确返回值,因为我的逻辑看起来不错。
这是我的尝试,使用 Datepicker 网站示例中的代码:
HTML:
Check in: <input type="text" class="span2" value="" id="dpd1"></input>
Check out: <input type="text" class="span2" value="" id="dpd2"></input>
JS:
var nowTemp = new Date();
var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
var checkin = $('#dpd1').datepicker({
onRender: function (date) {
return date.valueOf() < now.valueOf() ? 'disabled' : '';
}
}).on('changeDate', function (ev) {
if (ev.date.valueOf() > checkout.date.valueOf()) {
var newDate = new Date(ev.date)
newDate.setDate(newDate.getDate() + 1);
checkout.setValue(newDate);
}
checkin.hide();
$('#dpd2')[0].focus();
}).data('datepicker');
var checkout = $('#dpd2').datepicker({
onRender: function (date) {
return (date.valueOf() > now.valueOf()) && (date.valueOf() <= checkin.date.valueOf()) ? 'disabled' : '';
}
}).on('changeDate', function (ev) {
checkout.hide();
}).data('datepicker');
最佳答案
您需要检查所选日期是否小于且不大于结帐日期。
if (ev.date.valueOf() < checkout.date.valueOf()) {
用于结账的 onRender 方法,您正在检查日期是否早于今天以及 checkin 日期之前,这永远不可能是真的。您应该检查入住日期和今天之间的情况。希望这是您想要的。
onRender: function (date) {
return (date.valueOf() < now.valueOf()) && (date.valueOf()>= checkin.date.valueOf()) ? '' : 'disabled';
}
演示 fiddle
关于jquery - Bootstrap DatePicker 使用 onRender 禁用许多日期,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26856670/