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

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"));
  });

图片的html设计

Answer 1

不知道如果daterangepicker库可以做到这一点。

但这里是工作的fiddle为jquery datepicker。此外，它的理想使用不同的输入，所以你可以把它们单独保存在DB中，如果需要的报告目的，如果任何后来。

工作演示。https:/jsfiddle.netusmanmunir57wcjkth37）。

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 );

    }

超文本标记语言

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

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

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

希望对你有所帮助。