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

传递给它即可

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您可以在fn_toggleExpDateOut按钮radio事件处理程序中使用change的额外参数调用相同的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变量设为全局变量，因此可以访问/更改它在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>

在单选按钮更改后添加日期到datetimepicker

2 个答案: