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

Question

例如，我在 5 月 10 日入住时进行了第一次选择，它会自动转到“退房”部分，同时也选择了 5 月 10 日，之后的其他日子都可用。我要做的是让选定的日期和接下来的 2 天可用，而不是其余的。

如果您对文档感到好奇，我使用的 Bootstrap 日期选择器的 URL link 是：http://www.eyecon.ro/bootstrap-datepicker/

我目前拥有的 JSFiddle link 在这里：http://jsfiddle.net/9f6xhrm9/2/

如果上面的 JSFiddle link 对你不起作用，那么可能是因为你的浏览器强制使用 https，使用 chrome 不会导致这个问题，除非我把它变成一个https。因此，要么切换到 chrome，要么这里是与 JSFiddle link 关联的文件 - 位于下方：

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);
      }

Answer 1

查看您正在使用的日期选择器，我发现 eternicode's fork is being actively maintained. I'm not sure what the differences are but 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

Answer 2

在jcuenod的帮助下，解决方案如下link：http://jsfiddle.net/by2p9vxm/6/

在使用Eternicode资源的同时，其脚本更流畅，更容易处理，还有更全面的文档，再次感谢jcuenod的帮助。

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 checkout = $('#txtCheckOut').datepicker({autoclose: true, format: 'M/dd/yy'});
$('#txtCheckOut').attr('disabled', 'disabled');
var checkin = $('#txtCheckIn').datepicker({
    autoclose: true,
    format: 'M/dd/yy',
    startDate: "+7d"
}).on('changeDate', function(event) {
    $('#txtCheckOut').removeAttr('disabled');
    var newDate = new Date(event.date)
    newDate.setDate(newDate.getDate() + 2)
    checkout.datepicker("setStartDate", event.date);
    checkout.datepicker("setEndDate", newDate);
    $('#txtCheckOut')[0].focus();
});});

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

Bootstrap Datepicker, maxdate, 2 days from the first date selection

javascript

jquery

twitter-bootstrap

bootstrap-datepicker