DataTables with eonasdan DatePicker doesn't wo

Question

I have trouble with eonasdan DatePicker, i don't understand what i messed up... I think I have verified to have all the necessary resources but when i click in calendar icon nothing happens :\

Live code : live example

---

I have followed the installation instructions and manual and demos.

Quoting:

Minimal Requirements
jQuery
Moment.js
Bootstrap.js (transition and collapse are required if you're not using the full Bootstrap)
Bootstrap Datepicker script
Bootstrap CSS
Bootstrap Datepicker CSS
Locales: Moment's locale files are here

Scripts needed:

<script type="text/javascript" src="/path/to/jquery.js"></script>  
<script type="text/javascript" src="/path/to/moment.js"></script>  
<script type="text/javascript" src="/path/to/bootstrap/js/transition.js"></script>  
<script type="text/javascript" src="/path/to/bootstrap/js/collapse.js"></script>  
<script type="text/javascript" src="/path/to/bootstrap/dist/bootstrap.min.js"></script>  
<script type="text/javascript" src="/path/to/bootstrap-datetimepicker.min.js"></script>  

CSS styles

<link rel="stylesheet" href="/path/to/bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css" />  

Answer 1

You were dynamically adding IDs which were duplicated, your checking code wouldn't pick them up as it ran when the page loaded only! See more about this later.

You were still adding script from Github, which is frowned upon! I've replaced the references from ones from cdnjs. PLease refer to this about linking files directly from Github.

This updated JSFiddle works and will give you a basis to work from.

Basically I've added a callback to the table which will mean that your dynamically added datetimepickers will be initialised correctly (line 65). You're not able to interact with something unless it's within the DOM. This is an interesting concept to get your head around but well worth bearing in mind!

,
"fnDrawCallback": function() {
    $(".date").datetimepicker();
}