Question

我正在使用Bootstrap Datepicker在预订网站上工作，我想要实现的是当用户选择特定的入住日期和住宿天数时，它会为退房日期设置一个自动日期值。

 $.fn.datepicker.defaults.format = "mm/dd/yyyy";
 $(".check-in").datepicker("setDate", new Date());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css" />

<div class="booking">
  <input class="check-in" data-provide="datepicker">
  <input class="nights" type="number">
  <input class="check-out" data-provide="datepicker">
</div>

Answer 1

从值机字段获取日期。然后通过setDate()将其添加到（数字字段的）输入更改的数字上。最后，在结帐字段中设置新日期。请尝试以下操作：

$.fn.datepicker.defaults.format = "mm/dd/yyyy";
$(".check-in").datepicker("setDate", new Date());

$('.nights').on('input', function(){
  var date2 = $('.check-in').datepicker('getDate'); 
  date2.setDate(date2.getDate() + Number(this.value)); 
  $(".check-out").datepicker("setDate", date2);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css" />

<div class="booking">
  <input class="check-in" data-provide="datepicker">
  <input class="nights" type="number">
  <input class="check-out" data-provide="datepicker">
</div>

Answer 2

尝试使用onchange这个！

    $.fn.datepicker.defaults.format = "mm/dd/yyyy";
    $(".check-in").datepicker("setDate", new Date());

    function checkoutDate(){
       var date1 = $('.check-in').datepicker('getDate');
       var date = new Date( Date.parse( date1 ) );
       var nights = $('.nights').val();
       var count = parseInt(nights);
       date.setDate( date.getDate() + count);
       var newDate = date.toDateString();
       newDate = new Date( Date.parse( newDate ) );
       $('.check-out').datepicker('setDate', newDate );
   }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css" />
<div class="booking">
 <input class="check-in" data-provide="datepicker" onchange="checkoutDate();">
 <input class="nights" type="number" onchange="checkoutDate();">
 <input class="check-out" data-provide="datepicker">
</div>

Answer 3

您可以使用onchange事件。输入或聚焦或单击日期选择器后，字段值登记日期和数字就会立即更改。结帐字段将更新。

$.fn.datepicker.defaults.format = "mm/dd/yyyy";
$(".check-in").datepicker("setDate", new Date());

$('.nights, .check-in').on('change', function(){
  var date2 = $('.check-in').datepicker('getDate'); 
  var no_days= $('.nights').val(); 
  date2.setDate(date2.getDate() + Number(no_days)); 
  $(".check-out").datepicker("setDate", date2);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css" />

<div class="booking">
  <input class="check-in" data-provide="datepicker">
  <input class="nights" type="number" min="0">
  <input class="check-out" data-provide="datepicker">
</div>

自动设置输入值

3 个答案: