CODEWITHSUNDEEP
javascriptjquerydatatabledatepicker
KeithC
KeithC

Reputation: 456

Datepicker within jquery datatables not working

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>

Upvotes: 2

Views: 12605

Answers (3)

demoncodemonkey
demoncodemonkey

Reputation: 11957

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.

Upvotes: 1

user822472
user822472

Reputation: 9

For me the problem was : https://github.com/vitalets/bootstrap-datepicker is fireing the event to datatable corectly, ajax update table is called, but https://github.com/eternicode/bootstrap-datepicker was not

Upvotes: 0

KeithC
KeithC

Reputation: 456

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.

Upvotes: 3

Related Questions