日期選擇器Jquery選擇第一個日期後的第二個日期

Question

我正在建造住宿租賃搜索表單。該網站是ASPX的基礎，我使用JS Jquery Datepicker設置與CSS來使其工作。

我能夠使日期彈出工作和位置正確。但是，當網站用戶選擇第一個日期時，我需要第二個日期彈出窗口打開+2天。或第二個日期設置爲+2天。

有誰知道如何將JS代碼添加到我當前的安裝程序，使其工作？任何幫助將不勝感激，因爲我看了幾個關於這個話題的帖子，並沒有得到它的工作。

下面是我使用至今JS： -

<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> 

這是HTML： -

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

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

Answer 1

你可以選擇的日期和基於加2天，它在onSelect事件的第一個日期選擇器。

$(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=" " />