
<!doctype html>
<html>
    <head>
    
        <link rel="icon" href="../../Images/cloud-icon-27.png">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="../../Bootstrap/css/bootstrap.min.css">
        <script src="../../Bootstrap/jquery.min.js"></script>
        <script src="../../Bootstrap/js/bootstrap.min.js"></script>
        <link href="../../Datepicker/bootstrap-datepicker.css" rel="stylesheet" type="text/css" />
        <script src="../../Datepicker/bootstrap-datepicker.js"></script>
</pre>
<label>Select Date: </label>
   

<script>
    $(function () {
        $.fn.datepicker.defaults.format = "yyyy-dd-mm";
      $("#datepicker").datepicker({ 
            format : "yyyy-dd-mm",
            autoclose: true, 
            todayHighlight: true
      }).datepicker('update', new Date());
    });

</script>
<style>
    #datepicker{width:180px;height:30px;border-radius:5px;margin-left:10px;}
    #datepicker > span:hover{cursor: pointer;}
    #single-input{width:100px; height:30px;border-radius:5px;margin-left:10px;}
    #single-input > span:hover{cursor: pointer;}
</style>


        <link href="../../Clockpicker/bootstrap-clockpicker.min.css" rel="stylesheet" type="text/css" />
        <link href="../../Clockpicker/github.min.css" rel="stylesheet" type="text/css" />
        <script src="../../Clockpicker/jquery-clockpicker.min.js"></script>
        
        <?php
    date_default_timezone_set("Asia/Kolkata");
    $DateandTime=date("Y-m-d H:i:s");
        $time=date("H:i");
        ?>
         <input  type="text" id="datepicker" readonly />
<input id="single-input" value="<?php echo $time;?>" placeholder="Now" readonly>
<script type="text/javascript">
$('#single-input').clockpicker({
    placement: 'bottom',
    align: 'left',
    autoclose: true,
    'default': 'now'
});
</script>
