gpt4 book ai didi

javascript - 如果我放置日期选择器函数,数据表根本不起作用

转载 作者:行者123 更新时间:2023-12-03 08:26:55 26 4
gpt4 key购买 nike

所以我有2个插件,它们是数据表和日期选择器,如果我将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 设置为第二个 from 并完整通过 #listTable 控制数据表..一切正常,这是 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 - 如果我放置日期选择器函数,数据表根本不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33510507/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com