日期表没有'如果我放了日期选择器函数,它就根本不起作用
Datetable doesn't work at all if I put the datepicker function
所以我有两个插件,它们是数据表和日期选择器,如果我把javascript放在日期选择器上,数据表就不工作了,如果我删除它,日期选择器就不工作。
这是日期选择器的代码
<script src="assets/js/jquery-1.10.2.js"></script>
<script src="assets/js/jquery-ui.js"></script>
<script>
$(function() {
$( "#from" ).datepicker({
dateFormat: 'yy-mm-dd',
defaultDate: "+1 w",
changeMonth: true,
changeYear: true,
numberOfMonths: 1,
yearRange: '1935:'+(new Date).getFullYear() ,
onClose: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#to" ).datepicker({
dateFormat: 'yy-mm-dd',
defaultDate: "+1w",
changeMonth: true,
changeYear: true,
numberOfMonths: 1,
yearRange: '1935:'+(new Date).getFullYear() ,
onClose: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
</script>
这是数据表的代码
<script src="assets/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function(){
$('#listTable').DataTable();
});
</script>
这里是我的整个索引代码,我把所有的javascript函数和链接放在这里
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
<?php include ('title.php');?>
</title>
<link rel="icon" href="assets/img/LOGO.png">
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/plugins/metisMenu/metisMenu.min.css" rel="stylesheet">
<link href="assets/css/custom.css" rel="stylesheet">
<link href="assets/font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="assets/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="assets/css/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/plugins/metisMenu/metisMenu.min.js"></script>
<script src="assets/js/gen_validatorv31.js"></script>
<script src="assets/js/custom.js"></script>
<script src="assets/js/jquery-1.10.2.js"></script>
<script src="assets/js/jquery-ui.js"></script>
<script src="assets/js/jquery.dataTables.min.js"></script>
</head>
<body>
<?php
session_start();
include ("checkSession.php");
include ("nav.php");
include ("pagecontent.php");
?>
<script>
$(document).ready(function(){
$('#listTable').DataTable( {
"iDisplayLength": 50
} );
});
</script>
<script>
$(function() {
$( "#from" ).datepicker({
dateFormat: 'yy-mm-dd',
defaultDate: "+1 w",
changeMonth: true,
changeYear: true,
numberOfMonths: 1,
yearRange: '1935:'+(new Date).getFullYear() ,
onClose: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#to" ).datepicker({
dateFormat: 'yy-mm-dd',
defaultDate: "+1w",
changeMonth: true,
changeYear: true,
numberOfMonths: 1,
yearRange: '1935:'+(new Date).getFullYear() ,
onClose: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
</script>
<script>
$(function() {
var startDate = "1935";
var endDate = new Date().getFullYear() - 18;
var interval = startDate + ":" + endDate;
$( "#from2" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
changeYear: true,
numberOfMonths: 1,
yearRange: interval,
onClose: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#to2" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
changeYear: true,
numberOfMonths: 1,
yearRange: '1935:'+(new Date).getFullYear() ,
onClose: function( selectedDate ) {
$( "#from2" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
</script>
</body>
</html>
很抱歉发了这么长的帖子,我不知道该怎么办,错误是什么:(
如果你检查这个JSFiddle,我没有对你的代码做任何事情,除了清理它,将3个script
标记组合成一个,将$(document).ready()
函数包裹在你的js代码周围,就这样了-除了创建html静态内容-你会发现一切都正常工作,所有的日期选择器,将1935设置为第二CCD_ 3并且完全控制CCD_ 4上的Datatable。。一切正常,这是JS代码的干净版本:
$(document).ready(function () {
//============================= DataTable
$('#listTable').DataTable({
"iDisplayLength": 50
});
//============================= DatePicker 1
$("#from").datepicker({
dateFormat: 'yy-mm-dd',
defaultDate: "+1 w",
changeMonth: true,
changeYear: true,
numberOfMonths: 1,
yearRange: '1935:' + (new Date).getFullYear(),
onClose: function (selectedDate) {
$("#to").datepicker("option", "minDate", selectedDate);
}
});
$("#to").datepicker({
dateFormat: 'yy-mm-dd',
defaultDate: "+1w",
changeMonth: true,
changeYear: true,
numberOfMonths: 1,
yearRange: '1935:' + (new Date).getFullYear(),
onClose: function (selectedDate) {
$("#from").datepicker("option", "maxDate", selectedDate);
}
});
//============================= DatePicker2
var startDate = "1935";
var endDate = new Date().getFullYear() - 18;
var interval = startDate + ":" + endDate;
$("#from2").datepicker({
defaultDate: "+1w",
changeMonth: true,
changeYear: true,
numberOfMonths: 1,
yearRange: interval,
onClose: function (selectedDate) {
$("#to2").datepicker("option", "minDate", selectedDate);
}
});
$("#to2").datepicker({
defaultDate: "+1w",
changeMonth: true,
changeYear: true,
numberOfMonths: 1,
yearRange: '1935:' + (new Date).getFullYear(),
onClose: function (selectedDate) {
$("#from2").datepicker("option", "maxDate", selectedDate);
}
});
});
相关文章:
- 新的日期函数javascript
- 从角度日期函数中删除时间
- 在 php 标题标签中添加日期函数
- 如何调用日期函数并在接下来的 6 天插槽中显示
- Javascript日期函数显示错误的日期
- 如何在javascript中从日期函数中获取日期
- parse Int不适用于日期函数
- 日期函数不能正常工作
- 角度引导日期选择器开始日期函数
- 谁能解释为什么我的日期函数通过 JS 日期对象给了我错误的转换
- 使用日期函数 JavaScript
- 日期函数未按预期工作
- 将日期函数从JavaScript转换为PHP
- 我想在 JavaScript 中使用日期函数将日期获取为 9 月 8 日星期日上午 11:46
- Javascript日期函数设置和获取
- 带有当前日期的Javascript日期函数
- 获取Javascript日期函数的总和
- IE8:对象不;t支持此属性或方法(日期函数)
- Javascript日期函数返回错误的日期(当前PHP时间戳已传递给它)
- 停止javascript日期函数更改时区偏移量