将 15 天添加到引导程序日期选择器中的选定日期

问题描述

我正在使用引导程序日期选择器。我想为所选日期添加 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天到所选日期

解决方法

您可以使用 .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>

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

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

获取 yyyy-mm-dd 格式。

$("#invoice_date").datepicker({
    format: 'yyyy-mm-dd',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-datepicker jquery