Bootstrap Datepicker, maxdate, 2 days from the date you select

Question

Let’s say, for example, that I’m making the first selection within the framework of Check-In on May 10, it will automatically go to the Check-Out section with May 10 selected, and the remaining days after that will be available. What I'm trying to do is make the selected day and the next 2 days available, not the rest.

If you're curious about the documentation, the URL link for Bootprap Datepicker that I use is: http://www.eyecon.ro/bootstrap-datepicker/

A JSFiddle link to what I have now: http://jsfiddle.net/9f6xhrm9/2/

If the above JSFiddle link doesn’t work for you, then probably the reason your browser forces https is because using chrome does not cause this problem, except when I do it in https. Therefore, either switch to chrome, or here are the files associated with the JSFiddle link 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

Although, since this requires related code from JSFiddle here, I also posted it below:

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, I know that part of the answer is about using something like the following code:

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

will most likely be placed in 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

datepicker, , . , , .

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

.

Answer 2

jcuenod : http://jsfiddle.net/by2p9vxm/6/

Eternicode script , , 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();
});});