JSFiddle - React, Tailwind, and code Playground

by sourcecodezone

HTML

<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-datetimepicker/4.17.42/css/bootstrap-datetimepicker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.42/js/bootstrap-datetimepicker.min.js"></script>
<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);
})