代码之家 › 专栏 › 技术社区 › Rohit Verma

如何使用引导日期时间选择器获取三个月后的日期?

eonasdan-datetimepicker bootstrap-datetimepicker jquery javascript

Rohit Verma · 技术社区 · 7 年前

我正在使用jquery datetimepicker&I有两个控件:

我想在三个月后回来 To 按所选日期控制 From 控制。

你尝试了什么:

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

1 回复 | 直到 7 年前

Ahmad 7 年前

您需要将值从datepicker转换为 Date() 然后使用 .setMonth() 通过添加所需的月份数。然后您需要在输出字段上重新格式化它。

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