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

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 日期选择器工作 fiddle。它也非常适合用于不同的输入，因此如果需要的话，您可以将它们单独保存在数据库中，以便以后进行报告。

工作演示：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"/>

希望这对您有所帮助。

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

Can I add an input number for date-range picker to adjust the end date?

javascript

date-range

daterangepicker

bootstrap-daterangepicker