有多個日期選擇器並將它們鏈接在一起

Question

我使用這個https://github.com/eternicode/bootstrap-datepicker作爲日期選擇器。我對如何鏈接多個日期選擇器使它們都一樣有問題。一個用於標題，一個用於主頁面。如果我點擊標題上的日期選擇器並更改日期，它應該與主頁面中的相同，當我更改主頁面標題上的日期時也必須更改。把他們全部聯繫在一起。它只是初始化和工作在標題上。重新加載標題上的日期選擇器顯示今天的日期和明天的日期。當您更改抵達日期時，出發日期也會更改爲明天的日期。它在標題上工作，但在主頁上不起作用，它不會顯示今天的日期以及明天重新加載但顯示在標題上的日期。當您在主頁上點擊抵達日期時，出發日期不會更改，但它仍然會獲取標題上的日期。請幫忙。

我的代碼。

頁眉

<input type="text" name="dateArrival" class="datepicker arrivalDate"> 
    <input type="text" name="dateDeparture"class="datepicker departureDate"> 

網主頁

<input type="text" name="dateArrival" class="datepicker arrivalDate"> 
    <input type="text" name="dateDeparture"class="datepicker departureDate"> 

---

$(document).ready(function() { 

    var nowDate = new Date(); 
    var today = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 0, 0, 0, 0); 

$('.datepicker').datepicker({ 
    autoclose: true, 
    todayHighlight: true, 
    startDate: today 
}); 

    $(".datepicker").datepicker("setDate", new Date()); 
    $(".departureDate").datepicker("setDate", "+1d"); 
    $(".datepicker").datepicker({ minDate: 0}); 

    $(".arrivalDate").change(function() { 
     addDay($(".arrivalDate").val(), '.departureDate'); 
    }); 


}); 

    function addDay(date_val,fld){ 
     var dt = new Date(date_val); 
     var dt_new = new Date(dt.getFullYear(),dt.getMonth(),(dt.getDate() + 1)); 
       $(fld).val((((dt_new.getMonth() + 1) <=9) ? "0" + (dt_new.getMonth() + 1) : (dt_new.getMonth() + 1)) + "/" + (((dt_new.getDate()) <=9) ? "0" + dt_new.getDate() : dt_new.getDate()) + "/" + dt_new.getFullYear()); 
    } 

Answer 1

工作示例，對不起，我不能找出什麼是錯的你：

$(".datepicker").datepicker(); 
 
$("[name='dateDeparture']").change(function(){ 
 
    $("[name='dateDeparture']").val($(this).val()); 
 
}); 
 
$("[name='dateArrival']").change(function(){ 
 
    $("[name='dateArrival']").val($(this).val()); 
 
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
 
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
 
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 
<link rel="stylesheet" href="/resources/demos/style.css"> 
 
<input type="text" placeholder="Arrival Date" name="dateArrival" class="datepicker arrivalDate"> 
 
<input type="text" placeholder="Departure Date" name="dateDeparture" class="datepicker departureDate"> 
 
<hr> 
 
<input type="text" placeholder="Arrival Date" name="dateArrival" class="datepicker arrivalDate"> 
 
<input type="text" placeholder="Departure Date" name="dateDeparture" class="datepicker departureDate">