DataTables with eonasdan DatePicker doesn't work

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" />  

Kelter

Just a couple of things that spring to mind. Looks as though momentjs isn't running (check the console for errors) probably because you're doing a naughty thing in that you're pulling scripts from github, try to use cdnjs.com instead... Also you've got duplicate IDs you could try using the class of .date which would be better (IDs are supposed to be unique). Another thing is that it might be better to initiate the datetimepicker on the draw callback of the table... also I'd prefer JSFiddle but that's just me ;-) – Crippen

Following your comment, i added the cdn for moment-with-locales.js. Then i checked for duplicate ID's but i found nothing (even using jquery function). My issue is still here... I provide you a JSFiddle example, perhaps you can fix my problem please ? – Kelter

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();
}

Crippen

Thank you for this very complete and interesting answer ! Now i understand what you mean with same ID, sorry for my misunderstanding. I tried your code and all works perfectly except the render of datetimepicker. If i click on calendar it's behind other elements. Perhaps some CSS tricks are needed. By the way thanks for the help annoyingmouse !! – Kelter

Well i found the solution, just delete this two options : scrollY: 400, & sScrollX: "70%", Now the datetimepicker is showed good :) – Kelter