how to increment close date depend on select dropdown datepicker

Question

here is sample code

  <input id="date1" name="start_date" id="dpd1"/>
   <select class="form_line_only form-control" name="ho_night">
                        <option selected> 0 </option>
                        <option > 1 </option>
                        <option > 2 </option>
                        <option > 3 </option>
                        <option > 4 </option>
                        <option > 5 </option>
                        <option > 6 </option>
                        <option > 7 </option>
                        <option > 8 </option>
                        <option > 9 </option>
                        <option > 10 </option>
                      </select>
    <input id="date2" name="end_date" id="dpd2"/>

I want to set date of end date based on select night , can you please help me. I use Date Picker. and also user can't change date of end date. It's only work based on night select. please thanks in advance

 <script src="<?php echo BASE_URL;?>js/jquery-1.10.2.js" ></script>



    <script src="<?php echo BASE_URL;?>js/jquery.min.js" ></script>
    <script src="<?php echo BASE_URL;?>js/bootstrap.min.js"></script>
      <script src="<?php echo BASE_URL;?>ckeditor/ckeditor.js" ></script>

   <script src="<?php echo BASE_URL;?>js/bootstrap-datepicker.js" ></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.13/datatables.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 

 <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="js/bootstrap-datepicker.js" ></script> 

<script>

jQuery('.datepicker').datepicker()

$( "#dpd1" ).datepicker({ dateFormat: 'dd/mm/yy' });

var nowTemp = new Date();

var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);



var checkin = $('#dpd1').datepicker({

  onRender: function(date) {

    return date.valueOf() < now.valueOf() ? 'disabled' : '';

  }

}).on('changeDate', function(ev) {

  if (ev.date.valueOf() > checkout.date.valueOf()) {

    var newDate = new Date(ev.date)

    newDate.setDate(newDate.getDate() + 1);

    checkout.setValue(newDate);

  }

  checkin.hide();

  $('#dpd2')[0].focus();

}).data('datepicker');

var checkout = $('#dpd2').datepicker({

  onRender: function(date) {

    return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : '';

  }

}).on('changeDate', function(ev) {

  checkout.hide();

}).data('datepicker');

</script> 

Answer 1

You can use readonly attribute for end date so that user cant edit that field.

Secondly, to calculate the end date, perform date calculation of start date and nights , then you can put that value in end date field.

Here you can find various ways to add days to date.