有多个datepicker并将它们连接在一起

时间:2015-06-20 02:33:02

标签: javascript jquery datepicker

我正在使用此https://github.com/eternicode/bootstrap-datepicker作为日期选择器。我有一个关于如何链接多个datepickers使它们都一样的问题。一个用于标题,一个用于主页面。如果我单击标题上的日期选择器并更改日期,它应该在主页面中相同,当我更改主页面上的日期标题时也必须更改。将它们全部链接在一起。它只初始化并使用标题上的那个。重新加载时,标题上的日期选择器显示今天的日期和明天的日期。当您更改抵达日期时,出发也会更改为明天的日期。它适用于标题,但不适用于主页,它不显示今天的日期和重新加载的明天日期,但显示在标题上。当您在主页面上单击到达日期时,出发日期不会更改,它仍然会在标题上显示日期。请帮忙。

我的代码。

标题

   <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());
    }

1 个答案:

答案 0 :(得分:0)

一个工作的例子,抱歉我找不到你的错误:

$(".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">