I'm setting up a website that has a "Check-In" date and "Check-Out" date date selector. I need the "Check-Out" date to automatically set to the day after the check-in date.

I found a piece of code here, but for some reason it does not seem to be working.

I set up a CodePen here.

Here is the code I am using:

$(function () {
$("#datepicker").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
onSelect: function (selectedDate) {
if (this.id == 'datepicker') {
var dateMin = $('#datepicker').datepicker("getDate");
var rMin = new Date(dateMin.getFullYear(), dateMin.getMonth(), dateMin.getDate() + 1);
var rMax = new Date(dateMin.getFullYear(), dateMin.getMonth(), dateMin.getDate() + 15);
$('#datepicker2').val($.datepicker.formatDate('mm/dd/yy', new Date(rMax)));
}
}
});
});

I'm setting up a website that has a "Check-In" date and "Check-Out" date date selector. I need the "Check-Out" date to automatically set to the day after the check-in date.

I found a piece of code here, but for some reason it does not seem to be working.

I set up a CodePen here.

Here is the code I am using:

$(function () {
$("#datepicker").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
onSelect: function (selectedDate) {
if (this.id == 'datepicker') {
var dateMin = $('#datepicker').datepicker("getDate");
var rMin = new Date(dateMin.getFullYear(), dateMin.getMonth(), dateMin.getDate() + 1);
var rMax = new Date(dateMin.getFullYear(), dateMin.getMonth(), dateMin.getDate() + 15);
$('#datepicker2').val($.datepicker.formatDate('mm/dd/yy', new Date(rMax)));
}
}
});
});

• javascript
• jquery
• date
• datepicker

4 Answers 4

In your code pen, erase this:

jQuery(function() {
jQuery( "#datepicker" ).datepicker();
jQuery( "#datepicker2" ).datepicker();
});

Then try again.
But if you want the day after, perhaps you meant rMin rather than rMax at the end.

DEMO HERE

THIS is working demo here checkout date is one day after selected date automatically..

 $("#CheckInDatePicker").datepicker({     
            defaultDate: "+0",               
            changeMonth: true,
            dateFormat: "mm-dd-yy",
            minDate: "+0",
            onSelect: function (dateText, inst) {
                var d = $.datepicker.parseDate(inst.settings.dateFormat, dateText);
             d.setDate(d.getDate() + 1);
                $("#CheckOutDatePicker").val($.datepicker.formatDate(inst.settings.dateFormat, d));

           },

            onClose: function (selectedDate) {
                $("#CheckOutDatePicker").datepicker("option", "minDate", selectedDate);

            }

        });

Its simple using default datepicker plugins of JQuery. Code in jsfiddle contains 2 text box one for checkin and another for checkout.

$( "#checkin" ).datepicker({minDate : 0, dateFormat: 'dd-mm-yy'});

Hit Me !! For code...

All I did was put the "datepicker2" function again underneath the solution you provided. Then when I clicked in the "Check-Out" box, it worked and brought up the calendar again with the day after the checkout date default selected in the bright blue. Thanks for this. I was struggling with it too.

[<script>
  $(function () {
$("#datepicker").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
onSelect: function (selectedDate) {
if (this.id == 'datepicker') {
var dateMin = $('#datepicker').datepicker("getDate");
var rMin = new Date(dateMin.getFullYear(), dateMin.getMonth(), dateMin.getDate() + 1);
var rMax = new Date(dateMin.getFullYear(), dateMin.getMonth(), dateMin.getDate() + 1);
$('#datepicker2').val($.datepicker.formatDate('mm/dd/yy', new Date(rMax)));
}
}
});
});
</script>][1]


<script>
  $( function() {
    $( "#datepicker2" ).datepicker({
            dateFormat: "mm/dd/yy"}

    );

  } );
  </script>

THE HTML:

<div class="column1">
    <span>CHECK-IN</span>
    <br />
    <input name="DateIn" type="text" id="datepicker"/>
  </div>


   <div class="column2">
   <span>CHECK-OUT</span>
 <br />
    <input name="DateOut" type="text" id="datepicker2"/>
  </div>

enter image description here