在 bootstrap 日期选择器中向所选日期添加 15 天

Question

我正在使用 bootstrap 日期选择器。我想将所选日期增加 15 天。

$("#invoice_date").datepicker({
    format: 'yyyy-mm-dd',
}).on('changeDate', function(selected) {
    var minDate = new Date(selected.date.valueOf());
    var new_date = new Date(selected.date);
    new_date.setDate(new_date.getDate() + 15);
    $("#due_date").val(new_date);
    $('#due_date').datepicker('setStartDate', minDate);
});

<input type="text" name="invoice_date" id="invoice_date" value="2021-05-11" readonly>

<input type="text" name="due_date" id="due_date" value="2021-05-26" readonly>

选择发票日期后，我想在到期日值中向所选日期添加 15 天

Answer 1

您可以使用 .format() 获取 yyyy-mm-dd 格式的日期，然后在您的输入框中设置它。

演示代码:

$("#due_date").datepicker({
  format: 'yyyy-mm-dd'
})
$("#invoice_date").datepicker({
  format: 'yyyy-mm-dd',
}).on('changeDate', function(selected) {
  var new_date = new Date(selected.format());
  new_date.setDate(new_date.getDate() + 15);
  $("#due_date").val(new_date.toISOString().slice(0, 10));
  $('#due_date').datepicker('setStartDate', selected.format());
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>

<input type="text" name="invoice_date" id="invoice_date" value="2021-05-11" readonly>

<input type="text" name="due_date" id="due_date" value="2021-05-26" readonly>

Answer 2

您需要更改所选的日期格式。使用，

new Date(your date).toISOString().slice(0,10);

获取yyyy-mm-dd格式。

$("#invoice_date").datepicker({
    format: 'yyyy-mm-dd',
}).on('changeDate', function(selected) {
    var new_date = new Date(selected.format());
    new_date.setDate(new_date.getDate() + 15);
    // custom formatting
    $("#due_date").val(new_date.toISOString().slice(0, 10));
    $('#due_date').datepicker(
        'setStartDate', 
        selected.format()
    );
});

<input type="text" name="invoice_date" id="invoice_date" value="2021-05-11" readonly>

<input type="text" name="due_date" id="due_date" value="2021-05-26" readonly>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>

在 bootstrap 日期选择器中向所选日期添加 15 天

Add 15 days to selected date in bootstrap datepicker

jquery

bootstrap-datepicker