HTML

<div class="row">
  <div class="col-md-5"><div class='alert alert-info' id=d1></div> </div>
  <div class="col-md-1"></div>
  <div class="col-md-5"><div class='alert alert-info' id=d2></div> 
</div></div>

<div class="row">
 <div class="col-md-3"><input type="text" id="date_picker1" class='form-control' onclick="$('#g1').show();" placeholder="Calendar"></div>
  <div class="col-md-3"><span id=g1>
 <div class="col-md-1"><div id="slider_hour"  ></div><br>Hr</div>
<div class="col-md-1"><div id="slider_minute"  ></div><br>Min</div>
<div class="col-md-1"><div id="slider_second"  ></div><br>Sec</div>
</span></div>

<div class="col-md-3"><input type="text" id="date_picker2" class='form-control' onclick="$('#g2').show();" placeholder="Calendar"></div>
  <div class="col-md-3"><span id=g2>
 <div class="col-md-1"><div id="slider_hour2"  ></div><br>Hr</div>
<div class="col-md-1"><div id="slider_minute2"  ></div><br>Min</div>
<div class="col-md-1"><div id="slider_second2"  ></div><br>Sec</div>
</span></div>

</div>

JQuery

<script>
$(document).ready(function() {
/////////////////
///////
$('#g1,#g2').hide();
/////////
var hour=minute=second=hour2=minute2=second2=0;
var date1=date2="0000-00-00";	
my_function=function my_function(){
if(hour <=9){hour_d='0'+hour}else{hour_d=hour}
if(minute <=9){minute_d='0'+minute}else{minute_d=minute}
if(second <=9){second_d='0'+second}else{second_d=second}
$( "#d1" ).html( "<h1>"+date1+ " " +hour_d +":"+minute_d+":"+second_d+"</h1>" );
}
my_function();
 ///
 my_function2=function my_function2(){
if(hour2 <=9){hour_d2='0'+hour2}else{hour_d2=hour2}
if(minute2 <=9){minute_d2='0'+minute2}else{minute_d2=minute2}
if(second2 <=9){second_d2='0'+second2}else{second_d2=second2}
$( "#d2" ).html( "<h1>"+date2+ " " +hour_d2 +":"+minute_d2+":"+second_d2+"</h1>" );
}
my_function2();
//////////////////////////
$(function() {
$( "#slider_hour" ).slider({
 orientation: "vertical",
min:0,
max:23,
step:1,
 slide: function( event, ui ) {
 hour=ui.value; 
 my_function();
    }
 });
 });
////////////////
$(function() {
$( "#slider_minute" ).slider({
  orientation: "vertical",
min:0,
max:59,
step:1,
slide: function( event, ui ) {
minute=ui.value; 
my_function();
  }
 });
 });
//////
$(function() {
$( "#slider_second" ).slider({
orientation: "vertical",
min:0,
max:59,
step:1,
  slide: function( event, ui ) {
	 second=ui.value; 
     my_function();
     }
 });
 });
////////////////

$(function() {
$( "#date_picker1" ).datepicker({
  dateFormat: 'yy-dd-mm'
});
});

////////////
///////
$('#date_picker1').change(function() {
date1 = $('#date_picker1').val();
my_function();
})
////////////////

////////////////
$('#date_picker1').focus(function(){
$('#g1').show();
$('#g2').hide();
})

////////////////
$('#date_picker2').focus(function(){
$('#g2').show();
$('#g1').hide();
})
//////////////////////////////////////////////////////

//////////////////////////
$(function() {
  $( "#slider_hour2" ).slider({
  orientation: "vertical",
min:0,
max:23,
step:1,
	  slide: function( event, ui ) {
	 hour2=ui.value; 
     my_function2();
     }
 });
 });
////////////////
$(function() {
  $( "#slider_minute2" ).slider({
  orientation: "vertical",
min:0,
max:59,
step:1,
  slide: function( event, ui ) {
  minute2=ui.value; 
  my_function2();
     }
 });
 });
//////
$(function() {
  $( "#slider_second2" ).slider({
  orientation: "vertical",
min:0,
max:59,
step:1,
  slide: function( event, ui ) {
	 second2=ui.value; 
     my_function2();
     }
 });
 });
////////////////
$(function() {
$( "#date_picker2" ).datepicker({
  dateFormat: 'yy-dd-mm'
});
});
////////////
///////
$('#date_picker2').change(function() {
date2 = $('#date_picker2').val();
my_function2();
})
////////////////
////////////////
})
</script>