<div class="panel">
    <div class="panel-heading">
        <div class="panel-title">
            <h5>Basic Example</h5>
        </div>
    </div>
    <div class="panel-body p-20">
        <div class="demo">
            <ul class="list-style-none text-center" id="basicExample">
                <li class="display-inline-block w-15"><input type="text" class="date start" placeholder="start date" /></li>
                <li class="display-inline-block w-15"><input type="text" class="time start" placeholder="start time" /></li>
                <li class="display-inline-block"> to</li>
                <li class="display-inline-block w-15"><input type="text" class="time end" placeholder="end time" /></li>
                <li class="display-inline-block w-15"><input type="text" class="date end" placeholder="end date"/></li>
            </ul>
        </div>
    </div>
</div>
<!--======== JS =======-->
<script>
$('#basicExample .time').timepicker({
'showDuration': true,
'timeFormat': 'g:ia'
});

$('#basicExample .date').datepicker({
'format': 'm/d/yyyy',
'autoclose': true
});

var basicExampleEl = document.getElementById('basicExample');
var datepair = new Datepair(basicExampleEl);
</script>
<script type="text/javascript" src="js/date-picker/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="js/date-picker/jquery.timepicker.js"></script>
<script type="text/javascript" src="js/date-picker/datepair.js"></script>
<script type="text/javascript" src="js/date-picker/moment.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
                                                    
                                                

                                                    
<div class="panel">
    <div class="panel-heading">
        <div class="panel-title">
            <h5>Basic Date Picker</h5>
        </div>
    </div>
    <div class="panel-body p-20">
        <div class="form-group">
            <div class='input-group date table-adjust' id='datetimepicker1'>
                <input type='text' class="form-control" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>
</div>
<!--======== JS =======-->
<script>
$('#datetimepicker1').datetimepicker({
debug: true
});
</script>
<script type="text/javascript" src="js/date-picker/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="js/date-picker/jquery.timepicker.js"></script>
<script type="text/javascript" src="js/date-picker/datepair.js"></script>
<script type="text/javascript" src="js/date-picker/moment.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>