KeithC KeithC - 3 days ago 7
Javascript Question

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 JS seems to break down using type:"date-range" and 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>
</td>
<td class = 'status'>
review </td>
<td>
</td>
<td>
2013-01-08 </td>
<td>
2013-01-01 </td>
<td>
</td>
<td>
</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>

Answer

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.

Comments