How To Get Date From Datepicker With Bootstrap And Show The Date In Another Div

I am trying to get the date from a button and show it in another div.I have tried to use input tag method but it was not working.So I tried to use the button option with icon and m

Solution 1:

There is multiple problems with your code, first a button can't trigger the change event, it has to be changeDate.

Second, to get the date your need to use ev.date since the buttons value will not be updated on the changeDate event.

$(function() {

  var showdate = $("#show-date")
  $("#date").datepicker().on('changeDate', function(ev) {
    var selected = ev.date
    showdate.text(selected)
  });
});

Demo

$(function() {

  var showdate = $("#show-date")
  $("#date").datepicker().on('changeDate', function(ev) {
    var date = new Date(ev.date);
    var selected = ((date.getMonth() > 8) ? (date.getMonth() + 1) : ('0' + (date.getMonth() + 1))) + '/' + ((date.getDate() > 9) ? date.getDate() : ('0' + date.getDate())) + '/' + date.getFullYear()
    showdate.text(selected)
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" integrity="sha512-mSYUmp1HYZDFaVKK//63EcZq4iFWFjxSL+Z3T/aCt4IO9Cejm03q3NKKYN6pFQzY0SBOr8h+eCIAZHPXcpZaNw==" crossorigin="anonymous"
  referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js" integrity="sha512-T/tUfKSV1bihCnd+MxKD0Hm1uBBroVYBOYSk1knyvQ9VyZJpc/ALb4P0r6ubwVPSGB2GvjeoMAJJImBG12TiaQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<button type="button" class="btn btn-icon btn-primary w-full" id="date" data-plugin="datepicker">
<i class="icon wb-calendar" aria-hidden="true">
</i></button>
<div id="show-date"></div>