Bootstrap Datetimepicker Event Example

Bootstrap Datetimepicker has following events

• hide
• show
• change
• error
• update

Below example code will show how it can use.

HTML

<button id="showHide_bt" style="margin:50px 0px 0px 50px;" type="button" class="btn btn-success" onclick="showHide()" >Show</button>  
<div style="padding:25px;">
         <div style="width:200px;"  class='input-group date' id='datetimepicker_id'>
            <input id="datetimepicker_val_id" placeholder="To date"  type='text' class="form-control" />
            <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
            </span>
         </div>
</div>

JavaScript

function showHide(){ 
       var txt  = document.getElementById("showHide_bt").innerHTML;
       if(txt==="Show"){
        $('#datetimepicker_id').data("DateTimePicker").show();
        document.getElementById("showHide_bt").innerHTML = "Hide";
       }
       else if(txt==="Hide"){
        $('#datetimepicker_id').data("DateTimePicker").hide();
        document.getElementById("showHide_bt").innerHTML = "Show";
       }
}

//initilize datetimepicker
$(function () {
  $('#datetimepicker_id').datetimepicker({ format : 'HH:mm:ss DD-MM-YYYY'});
 });
 
//events
$('#datetimepicker_id').on('dp.show', function(e){
         console.log("Show Event: "+ document.getElementById("datetimepicker_val_id").value);
})
      
$('#datetimepicker_id').on('dp.update', function(e){
         console.log("Update Event: "+ document.getElementById("datetimepicker_val_id").value);     
})

$('#datetimepicker_id').on('dp.change', function(e){
         console.log("Change Event: "+ document.getElementById("datetimepicker_val_id").value);
})

$('#datetimepicker_id').on('dp.hide', function(e){
         console.log("Hide Event: "+ document.getElementById("datetimepicker_val_id").value);
})

$('#datetimepicker_id').on('dp.error', function(e){
         console.log("Error Event: "+ document.getElementById("datetimepicker_val_id").value);
})

Demo