在单选按钮更改后向日期时间选择器添加天数

Question

我有两个日期输入框 Date From 和 Date To 以及两个单选按钮。

第一个单选按钮将增加 5 天，而第二个单选按钮将增加 10 天 Date To。

如何在单选按钮变化时触发Date To？

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

您只需运行您运行在 fromDate 上更改的相同功能。只需将当前 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>

Answer 2

您可以在 radio 按钮 change 事件处理程序上调用相同的 fn_toggleExpDateOut，并为 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);
});

注：

我稍微编辑了你的 fn_toggleExpDateOut() 函数，所以它仅接受 days 作为参数，并编辑 dateto datetimepicker 值根据传递的参数。
我还把days变量设为全局变量，所以它可以是accessed/changed 在 change 事件处理程序和 fn_toggleExpDateOut 中，并添加了一个全局 date 变量来保存 datefrom 日期值。

演示：

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>

在单选按钮更改后向日期时间选择器添加天数

Add days to datetimepicker upon radio button changed

html

jquery

bootstrap-datetimepicker

eonasdan-datetimepicker