Bootstrap dateTime picker is not working and not showing properly as well

Question

In my page I am using jQuery multidate Picker in two input fields and on some other input field I am using bootstrap dateTime picker. But I am facing many issues-

1)Boostrap dateTime picker is not working properly not showing in proper place where I wants and showing error in console is "uncaught typeerror: cannot read property 'top' of undefined"

2)When I am giving reference of library as full URL then only its working but when I am giving reference from my JS and CSS library folders its showing error in console as- $(....).datetimepicker is not a function.

URL ---Bootstrap dateTime picker

<link href="https://tarruda.github.io/bootstrap-datetimepicker/assets/css/bootstrap.css" rel="stylesheet" />
<link href="https://tarruda.github.io/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet" />
<script src="https://tarruda.github.io/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>

HTML

<div class="form-group  col-md-4 col-sm-4 txtnew  col-xs-6">
        <label for="date">Date:</label> <br />
        <s:textfield type="text" readonly="true" id="createDate" 
         name="createDate"class="form-control" autocomplete="off"/>
</div>

JAVASCRIPT

<script>
$(function() {
  $('#createDate').datetimepicker();
});
</script> 

screenshot of error in console

Please help me I searched a lot but not able to resolve it.

Thanks in advance...

Answer 1

please refer to the below jsfiddle

https://jsfiddle.net/hd75xoky/1/

<div class="container">
<div class="row">
    <div class='col-sm-6'>
        <input type='text' class="form-control" id='createDate' name="createDate" readonly />
    </div>
</div>

 $(function () {
     $('#createDate').datetimepicker({
       ignoreReadonly: true
     });
 });

it seem that the reference of your link is causing the issue, as I link it using the reference that you post, it hit the same error that you had face, below is the reference that I use from cdnjs, feel free to have a look

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>