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

Question

Lets say for example that I make the first selection within Check-In on May 10th, it automatically goes to the Check-Out section with May 10th selected as well and rest of the days afterwards available. What I'm trying to do is make it so that the day selected and the following 2 days are available and not the rest.

If your curious about documentation, the URL link for the Bootstrap Datepicker that I'm using is: http://www.eyecon.ro/bootstrap-datepicker/

A JSFiddle link of what I currently have is here: http://jsfiddle.net/9f6xhrm9/2/

If the above JSFiddle link doesn't work for you, then its probably cause your browser is forcing a https, using chrome does not cause this issue except for when I make it into a https. So either switch to chrome or here is the files associated with the JSFiddle link - located below:

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

Though since it's required to have the associated code from JSFiddle on here, I posted that down below as well:

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

To help out, I know that part of the answer deals with using something like the following code:

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

most likely to be put within this bit of code:

      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

Looking at the datepicker that you're using, I see that eternicode's fork is being actively maintained. I'm not sure what the differences are but in the docs eternicode's version is helpful.

The key is setting startDate and endDate in the options.

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

See the working fiddle

Answer 2

With help from jcuenod, the solution is in the following link: http://jsfiddle.net/by2p9vxm/6/

While using Eternicode resources, the script for that is smoother and easier to deal with, along with a more comprehensive documentation, again thanks for the help 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();
});});