Peacefull Peacefull - 1 year ago 100
jQuery Question

DataTables with eonasdan DatePicker doesn't work

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.


Minimal Requirements



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 Source

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() {