有多个日期选择器并将它们链接在一起

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