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 my problem is how i can get the date and show it in another place.
<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>
here is my js
$(function() {
var showdate = document.getElementById( 'show-date' );
$("#date").datepicker();
$("#date").on("change",function(){
var selected = $(this).val();
showdate.selected.show;
});
});
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>