javascript jquery 数据表中的日期选择器不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14159774/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Datepicker within jquery datatables not working
提问by KeithC
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.
然而，我的问题是当我'{type:"date-range"}在 aoColumns 中选择时，我收到一个错误，告诉我这from.datepicker()不是一个函数。
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
任何人都可以帮助我解释为什么我的 JavaScript 似乎使用 type:"date-range" 崩溃。我似乎无法弄清楚为什么它不会像这里显示的示例那样工作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>
回答by KeithC
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.
解决了。1.8.2 的两个脚本发生冲突并导致 jQuery datepicker 无法工作。我只需要删除一个脚本并在页面底部只留下一个版本的 1.8.2.min。
回答by demoncodemonkey
I found that input.datepicker is a jQueryUI thing. The solution was to include jQueryUI in the page, and it magically worked.
我发现 input.datepicker 是一个 jQueryUI 的东西。解决方案是在页面中包含 jQueryUI，它神奇地起作用了。
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.
顺便说一句，对于其他类型的列过滤器，它在没有 jQueryUI 的情况下工作正常，只有当我尝试使用日期范围过滤器时，我才注意到任何错误。相当微妙。
回答by user822472
For me the problem was : https://github.com/vitalets/bootstrap-datepickeris fireing the event to datatable corectly, ajax update table is called, but https://github.com/eternicode/bootstrap-datepickerwas not
对我来说，问题是： https://github.com/vitalets/bootstrap-datepicker 正确地将事件触发到数据表，调用了 ajax 更新表，但 https://github.com/eternicode/bootstrap-datepicker不是
