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

As shown in the image attached, I have a daterange picker for hotel checkin and checkout, I could calculate the nights from the difference between the checkin and checkout.

What I want is to make the checkout date affected by input field of nights number to increase or decrease the checkout dates.

Thanks.

the code is:

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

Not sure if daterangepicker library could do this at all.

But here is working fiddle for jquery datepicker. Also its ideal to use to different input so you can save them separate in DB if needed for reporting purposes if any later on.

Working Demo: 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"/>

Hope this helps.