Add days to datetimepicker upon radio button changed

Question

I have a two date input box Date From and Date To and two radio buttons.

The first radio button will add 5 days while the second radio button will add 10 days to the Date To.

How to trigger the Date To upon radio button change?

$('.datetimepicker').datetimepicker({
  format : "YYYY-MM-DD"
});

function fn_toggleExpDateOut(e){
  var days = 0;
  var sel = $('input[name=rb]:checked').val() || 0;
  var dateto = e.date.add(+sel || 0, 'days');
  
  $('#dateto').val(dateto.format('YYYY-MM-DD'));
}

$('#datefrom').datetimepicker().on('dp.change', function(e) {
  fn_toggleExpDateOut(e);
});

$('input[type=radio][name=rb]').on('change', function() {
  // How to update the Date To?
})

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

<div class="col-lg-6">
<input id="datefrom" name="datefrom" type="text" class="datetimepicker form-control" />
</div>
<div class="col-lg-6">
<input id="dateto" name="dateto" type="text" class="datetimepicker form-control" />
</div>

<div class="col-lg-6">
  <input type="radio" id="rb_five" name="rb" value="5" /> <label for="rb5">Top <small>Add 5 days</small></label>
</div>
<div class="col-lg-6">
  <input type="radio" id="rb_ten" name="rb" value="10" /> <label for="rb10">Standard <small>Add 10 days</small></label>
</div>

Answer 1

You can call the same fn_toggleExpDateOut on your radio button change event handler, with an extra parameter for days.

var days = 0;

$('.datetimepicker').datetimepicker({
  format: "YYYY-MM-DD"
});

function fn_toggleExpDateOut(days) {
  var dateto = $("#datefrom").data('DateTimePicker').date().add(days, 'days');
  $('#dateto').val(dateto.format('YYYY-MM-DD'));
}

$('#datefrom').datetimepicker().on('dp.change', function(e) {
  fn_toggleExpDateOut(days);
});

$('input[type=radio][name=rb]').on('change', function(e) {
  days = parseInt($(this).val());
  fn_toggleExpDateOut(days);
});

Note:

• I edited your fn_toggleExpDateOut() function slightly, so it accepts only days as param, and edit the dateto datetimepicker value according the passed params.

• I also made the days variable global, so it can be accessed/changed in the change event handler and in fn_toggleExpDateOut as well, and added a global date variable to hold the datefrom date value.

Demo:

var days = 0;

$('.datetimepicker').datetimepicker({
  format: "YYYY-MM-DD"
});

function fn_toggleExpDateOut(days) {
  var dateto = $("#datefrom").data('DateTimePicker').date().add(days, 'days');
  $('#dateto').val(dateto.format('YYYY-MM-DD'));
}

$('#datefrom').datetimepicker().on('dp.change', function(e) {
  fn_toggleExpDateOut(days);
});

$('input[type=radio][name=rb]').on('change', function(e) {
  days = parseInt($(this).val());
  fn_toggleExpDateOut(days);
});

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

<div class="col-lg-6">
  <input id="datefrom" name="datefrom" type="text" class="datetimepicker form-control" />
</div>
<div class="col-lg-6">
  <input id="dateto" name="dateto" type="text" class="datetimepicker form-control" />
</div>

<div class="col-lg-6">
  <input type="radio" id="rb_five" name="rb" value="5" /> <label for="rb5">Top <small>Add 5 days</small></label>
</div>
<div class="col-lg-6">
  <input type="radio" id="rb_ten" name="rb" value="10" /> <label for="rb10">Standard <small>Add 10 days</small></label>
</div>

Answer 2

You just need to run the same function you run on fromDate change. Just pass it the current fromDate

$('.datetimepicker').datetimepicker({
  format : "YYYY-MM-DD"
});

function fn_toggleExpDateOut(date) {
  var days = 0;
  var sel = $('input[name=rb]:checked').val() || 0;
  console.log('sel', sel)
  var dateto = date.add(+sel || 0, 'days');
  
  $('#dateto').val(dateto.format('YYYY-MM-DD'));
}

$('#datefrom').on('dp.change', function(e) {
  fn_toggleExpDateOut(e.date);
});

$('input[type=radio][name=rb]').on('change', function() {
  var fromDate = $('#datefrom').data('DateTimePicker').date();
  if (fromDate) {
    fn_toggleExpDateOut(fromDate);
  }
})

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

<div class="col-lg-6">
<input id="datefrom" name="datefrom" type="text" class="datetimepicker form-control" />
</div>
<div class="col-lg-6">
<input id="dateto" name="dateto" type="text" class="datetimepicker form-control" />
</div>

<div class="col-lg-6">
  <input type="radio" id="rb_five" name="rb" value="5" /> <label for="rb5">Top <small>Add 5 days</small></label>
</div>
<div class="col-lg-6">
  <input type="radio" id="rb_ten" name="rb" value="10" /> <label for="rb10">Standard <small>Add 10 days</small></label>
</div>