javascript – Bootstrap Datepicker,maxdate,距离第一个日期选择2天

让我们举例说,我在5月10日在Check-In中进行了第一次选择,它会自动进入Check-Out部分,同时选择5月10日,其余时间可用.我正在尝试做的是让选定的日期和接下来的2天可用,而不是其余的.

如果您对文档感到好奇,我正在使用的Bootstrap Datepicker的URL链接是：http://www.eyecon.ro/bootstrap-datepicker/

我现在拥有的JSFiddle链接在这里：http://jsfiddle.net/9f6xhrm9/2/

如果上面的JSFiddle链接不适合您,那么可能是因为您的浏览器强制使用https,使用chrome不会导致此问题,除非我将其设置为https.所以要么切换到chrome,要么就是与JSFiddle链接相关的文件 – 位于下面：

http://www.eyecon.ro/bootstrap-datepicker/js/bootstrap-datepicker.js

http://www.eyecon.ro/bootstrap-datepicker/css/datepicker.css

http://getbootstrap.com/dist/js/bootstrap.min.js

http://www.eyecon.ro/bootstrap-datepicker/css/bootstrap.css

虽然因为需要在这里提供JSFiddle的相关代码,我也在下面发布了：

HTML

<input type="text" id="txtCheckIn" placeholder="* Check-In Date (M/D/Y)" readonly>
<input type="text" id="txtCheckOut" placeholder="* Check-Out Date (M/D/Y)" readonly>

JS

$(function(){
var nowTemp = new Date();
var now = new Date(nowTemp.getFullYear(),nowTemp.getMonth(),nowTemp.getDate()+7);
$('#txtCheckOut').attr('disabled','disabled');
var checkin = $('#txtCheckIn').datepicker({onRender: function(date) {return date.valueOf() < now.valueOf() ? 'disabled' : '';}})
.on('changeDate',function(ev) {
    if (ev.date.valueOf() > checkout.date.valueOf()) {
        $('#txtCheckOut').removeAttr('disabled');
        var newDate = new Date(ev.date);
        newDate.setDate(newDate.getDate());
        checkout.setValue(newDate);
    }
    checkin.hide(); $('#txtCheckOut')[0].focus();
})
.data('datepicker');
var checkout = $('#txtCheckOut').datepicker({onRender: function(date) {
    if (checkin.date.valueOf()) {return date.valueOf() < now.valueOf() ? 'disabled' : '';}
    else {return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : '';}
}})
.on('changeDate',function(ev) {checkout.hide();})
.data('datepicker');});

为了提供帮助,我知道答案的一部分涉及使用类似下面的代码：

date.valueOf() > now.valueOf() ? 'disabled' : ''

最有可能放在这段代码中：

if (ev.date.valueOf() > checkout.date.valueOf()) {
        $('#txtCheckOut').removeAttr('disabled');
        var newDate = new Date(ev.date);
        newDate.setDate(newDate.getDate());
        checkout.setValue(newDate);
      }

解决方法

查看您正在使用的日期选择器,我看到正在积极维护 eternicode’s fork.我不确定区别是什么,但 in the docs eternicode的版本很有帮助.

关键是在选项中设置startDate和endDate.

$(function () {
    var checkout = $('#txtCheckOut').datepicker();
    var checkin = $('#txtCheckIn').datepicker({
        startDate: "today"
    }).on('changeDate',function(event) {
        var newDate = new Date(event.date)
        newDate.setDate(newDate.getDate() + 2)
        checkout.datepicker("setStartDate",event.date);
        checkout.datepicker("setEndDate",newDate);
    });
});

见工作fiddle