我可以为日期范围选择器添加一个输入数字来调整结束日期吗？

Question

如附图所示，我有一个用于酒店入住和退房的日期范围选择器，我可以根据入住和退房之间的差异计算住宿天数。

我想要的是使结帐日期受夜数输入字段的影响，以增加或减少结帐日期。

谢谢。

代码是：

$(function() {
  $('#client_duration').daterangepicker({
    "autoApply": true,
    "opens": "center", 
    locale: {format: 'DD/MM/YYYY'}
  },);    
  $('#client_duration').on('apply.daterangepicker', function(ev, picker) {
    $('#client_nights').val(picker.endDate.diff(picker.startDate, "days"));
  });

Image of the html design

Answer 1

不确定 daterangepicker 库是否可以做到这一点。

但是这里是 jquery datepicker 的工作小提琴。它也是用于不同输入的理想选择，因此您可以在以后需要时将它们单独保存在数据库中以用于报告目的。

工作演示：https://jsfiddle.net/usmanmunir/57wcjkth/37/

jQuery

$('#date1').datepicker({ dateFormat: 'd/m/yy' });
$('#date2').datepicker({ dateFormat: 'd/m/yy' });

    function addingDate(value) {
     console.log('Yes')
     var date2 = $('#date2').datepicker('getDate');
     var date = new Date( Date.parse( date2 ) ); 
     date.setDate( date.getDate() + 1 );
     var newDate = date.toDateString(); 
     newDate = new Date( Date.parse( newDate ) );
     $('#date2').datepicker('setDate', newDate );

    }

HTML

<input placeholder="CheckIn" id="date1" />

<input placeholder="Checkout" id="date2" />

<input type="number" onchange="addingDate(this.value)" id="total_nights"/>

希望这会有所帮助。