首页 > 解决方案 > 自动设置输入值

问题描述

我正在使用引导日期选择器在预订网站上工作,我想要实现的是当用户选择特定的入住日期和晚数时,它会为退房日期设置自动日期值。

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

标签: javascriptjqueryhtmldatepicker

解决方案


从签到字段中获取日期。然后将其添加到输入更改(数字字段)的数字中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>


推荐阅读