Datepicker jQuery选择第一个日期后设置第二个日期

Question

I am building an accommodation rental search form. The website is ASPX based and I am using the JS Jquery Datepicker setup with CSS to make it work.

I am able to make the date popup work and position correctly. However, when the website user chooses the first date, I need the second date popup window to open +2 days. Or the second date to be set to +2 days.

Does anyone know how to add JS code to my current setup to make this work? Any help would be greatly appreciated as I looked at several posts about this topic and could not get it to work.

Below is the JS that I am using so far:-

<script>
$(document).ready(function() {

$("#txtDate").datepicker({
    showOn: 'button',
    buttonText: 'Show Date',
    numberOfMonths:1,
    buttonImageOnly: true,
    buttonImage: '/images/cont/mobile/calendar.png'
});

$("#txtDate2").datepicker({
    showOn: 'button',
    buttonText: 'Show Date',
    numberOfMonths:1,
    buttonImageOnly: true,
    buttonImage: '/images/cont/mobile/calendar.png'
});

$(".ui-datepicker-trigger").mouseover(function() {
    $(this).css('cursor', 'pointer');
});

});
</script>

And this is the HTML:-

<input type='text' id='txtDate' name="checkin" value=" " /> 

<input type="text" id="txtDate2" name="checkout" value=" " />

Answer 1

You can get the selected date and add 2 days to it based on onSelect event of the first datepicker.

 $(function () { $("#txtDate").datepicker({ //showOn: 'button', buttonText: 'Show Date', numberOfMonths: 1, buttonImageOnly: true, buttonImage: '/images/cont/mobile/calendar.png', onSelect: function(dateText, inst) { var txtDate = $(this).datepicker('getDate'); txtDate.setDate(txtDate.getDate() + 2); $("#txtDate2").datepicker('setDate', txtDate); } }); $("#txtDate2").datepicker({ //showOn: 'button', buttonText: 'Show Date', numberOfMonths: 1, buttonImageOnly: true, buttonImage: '/images/cont/mobile/calendar.png' }); $(".ui-datepicker-trigger").mouseover(function () { $(this).css('cursor', 'pointer'); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <input type='text' id='txtDate' name="checkin" value=" " /> <input type="text" id="txtDate2" name="checkout" value=" " />