Datepicker within jquery datatables not working

11,473

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.

Share:
11,473
KeithC
Author by

KeithC

Irish Software Tester living in Auckland NZ.

Updated on June 04, 2022

Comments

  • KeithC
    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 that from.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>