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

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