Hello everyone, welcome back to Learn Tech Tips blogspot

Today topic is show you how to fix bug OnChange event not working with Bootstrap 4Datetimepicker 

Bootstrap Datetimepicker OnChange event (WORKING)

Tiktok 

If you are working with Bootstrap datetimepicker and you want to trigger onChange value on datetimepicker event, how do you do it? 

(This topic is using Bootstrap 4.4.1 and Datatimepicker v4) Yeah, when you search out my topic, Congratulation, finally you had found the answer, Same as you I had been found many answers from many page as stackoverflow, as many topic, …..  but no luck. 

Finally I had found the best answer after take half days researching and trying many method. For save your time research and finding answer bootstrap datetimepicker onChange event. So I want to share with you guys my answer. I think it will help you so much when you woring on change event for bootstrap datetimepicker

Ok, Don’t waste the time now, let’s start!!!

Actually use onChange event on Datetimepicker with below detail soure code

Include: (about library you can download on my github)

  <link href="css/bootstrap.min.css" rel="stylesheet"></link>
  <script src="js/jquery.min.js"></script>
  <link href="css/tempus-dominus-bootstrap4.min.css" rel="stylesheet"></link>
  <link crossorigin="anonymous" 
       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" 
       integrity="sha512-KfkfwYDsLkIlwQ
                 p6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" 
       referrerpolicy="no-referrer" rel="stylesheet"></link>

HTML:

<div class="form-group">
   <div class="input-group date" id="datetimepicker1" data-target-input="nearest">
     <input type="text" class="form-control datetimepicker-input" 
     		data-target="#datetimepicker1" />
     <div class="input-group-append" data-target="#datetimepicker1" 
     		data-toggle="datetimepicker">
       <div class="input-group-text">
       		<i class="fa fa-calendar"></i></div>
     </div>
    </div>
</div>

Javascript

$(document).ready(function () {
   $("#datetimepicker1").datetimepicker({
       format: 'YYYY-MM-DD',
    });

   $("#datetimepicker1").on("change.datetimepicker", ({ date, oldDate }) => {
       $('#current_date').text(date);
       $('#old_date').text(oldDate);
    });
});

You can get my source code from here

If you have any feedback or questions about bootstrap datetimepicker onchange event not working, leave your comment we can discuss about it

See you all

Learn Tech Tips – Zidane

Thanks for tempus dominus for show me how to integrated bootstrap 4 with Datetimepicker