Add 15 days to selected date in bootstrap datepicker

user_15539888 0
Viewed 460

I am using bootstrap datepicker. I want to add 15 days to selected date.

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

When invoice date is selected, I want to add 15 days to the selected date in due date value

bootstrap-datepicker jquery
2 Answers

You can use .format() to get date in format of yyyy-mm-dd and then set this inside your input-box .

Demo Code:

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

user_106064000

You need to change the selected date format. use,

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

to get yyyy-mm-dd format.

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

user_66786410
Related