Datepicker within jquery datatables not working
Solution 1
Solved. The two scripts of 1.8.2 were conflicting and causing jQuery datepicker not to work. I just had to remove one script and leave just one version of 1.8.2.min at the bottom of the page.
Solution 2
I found that input.datepicker is a jQueryUI thing. The solution was to include jQueryUI in the page, and it magically worked.
BTW it was working fine without jQueryUI for other types of column filters, it's only when I tried to use the date range filters that I noticed any error. Quite subtle.
Comments
-
KeithC over 1 year
Having some trouble with a datepicker on a datatable. Ive set up two test date selectors at the top of the page and they work fine.
My problem is however when I choose
'{type:"date-range"}
in my aoColumns I get an error telling me thatfrom.datepicker()
is not a function.Ive tried all other types of filters(select, number-range etc) and all are working correctly with the exception of date-range.
Can anyone help me with why my JavaScript seems to break down using type:"date-range". I cant seem to figure out why it wont work like the example shown here http://jquery-datatables-column-filter.googlecode.com/svn/trunk/dateRange.html
Below is code
<body> <div id="content"> </div><div id='assignments_view'> <h1>Assignments</h1><br/> From:<input type="text" name="start_date" value="" id="dateStart" placeholder="start Date" /><br/> To:<input type="text" name="end_date" value="" id="dateEnd" placeholder="End Date" /><br/> <button id = "addNewAssignmentButton">Add New Assignment</button> <div id="assignmentTableDiv"> <table id="assignmentTable" class="fht-table" > <thead> <tr> <th>Name</th> <th>Basic Information</th> <th>Submitter</th> <th>Status</th> <th>Area</th> <th>Start Date</th> <th>End Date</th> <th>Shopping Cart</th> <th>Purchase Order</th> </tr> </thead> <tbody> <tr class = "assignmentRow" ondblclick="document.location = 'assignments/load_individual_assignment_view/21 '"> <td>Test assignment</td> <td>basic Info for test assignment</td> <td class = 'status'>review</td> <td>2013-01-08</td> <td>2013-01-01</td> </tr> </tbody> <tfoot><tr class = "footer"> </tr></tfoot> </table> </div> </div> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="http://localhost/ahb/js/libs/jquery-1.7.1.min.js"><\/script>')</script> <script src="http://localhost/ahb/js/libs/jquery-ui-1.8.20.custom.min.js"></script> <script> $(document).ready( function () { var oTable = $('#assignmentTable') .dataTable( { "bJQueryUI": true, } ) .columnFilter({ sPlaceHolder: "head:before", aoColumns: [ null,null,{type:"select"},null,null, null, {type:"date-range"}, null, null, ]} ); }); </script> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="http://localhost/ahb/js/libs/jquery-1.7.1.min.js"><\/script>')</script> <script src="http://localhost/ahb/js/libs/jquery-ui-1.8.20.custom.min.js"></script> <script> $('#dateStart').datepicker({ dateFormat: "yy-mm-dd" }); $('#dateEnd').datepicker({ dateFormat: "yy-mm-dd" }); </script> <div id="footer"> <footer> Page rendered in <strong>0.0951</strong> seconds </footer> </div> <!-- JavaScript at the bottom for fast page loading --> <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="http://localhost/ahb/js/libs/jquery-1.7.1.min.js"><\/script>')</script> <!-- scripts concatenated and minified via build script --> <script src="http://localhost/ahb/js/plugins.js"></script> <script src="http://localhost/ahb/js/script.js"></script> <script src="http://localhost/ahb/js/jquery-placeholder.js"></script> <script src="http://localhost/ahb/js/libs/jquery.dataTables.min.js"></script> <script src="http://localhost/ahb/js/libs/jquery.dataTables.columnFilter.js"> </script> <script src="http://localhost/ahb/js/libs/tabletools.js"></script> <!-- end scripts --> </body> </html>