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

Having multiple datepicker and linking them all together

本文关键字：全部 链接 在一起 日期 选择器 拥有      更新时间：2023-09-26

我用这个 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());
    }

一个工作示例，抱歉我无法找出您的问题：

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

相关文章：