How to get date of after three month using bootstrap datetimepicker?

Question

I'm using jquery datetimepicker & i have two controls:

1. From
2. To

I want get after three month date in To control as per selected date in From control.

What U tried:-

$(function () {
    $('.datePicker').datetimepicker({
    });


    $('body').on('blur', '.pcFrom', function () {
        var fromDate = $(this).val();
        $('.pcTo').val(fromDate);
    });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/eonasdan-bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" />


<script src="https://cdnjs.cloudflare.com/ajax/libs/eonasdan-bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

<div class="form-group">
    <label>From</label>
    <input type="text" class="form-control datePicker pcFrom" data-date-format="MM-DD-YYYY">
</div>
  
<div class="form-group">
    <label>To</label>
    <input type="text" class="form-control pcTo">
</div>

Answer 1

You will need to convert the value from the datepicker to Date() and then use .setMonth() by adding the desired number of month. Then you will need to re-format it again on the output field.

  $('.datePicker').datetimepicker();


  $(document).on('blur', '.pcFrom', function() {
    var fromDate = new Date($(this).val());
    var after3Months = fromDate.setMonth(fromDate.getMonth()+3);
    
    
    $('.pcTo').val("" + (fromDate.getMonth()+1) + "-" + fromDate.getDate() + "-" + fromDate.getFullYear());
  });

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/eonasdan-bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" />


<script src="https://cdnjs.cloudflare.com/ajax/libs/eonasdan-bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

<div class="form-group">
  <label>From</label>
  <input type="text" class="form-control datePicker pcFrom" data-date-format="MM-DD-YYYY">
</div>

<div class="form-group">
  <label>To</label>
  <input type="text" class="form-control pcTo">
</div>