日期表没有'如果我放了日期选择器函数,它就根本不起作用

Datetable doesn't work at all if I put the datepicker function

本文关键字:日期 函数 不起作用 选择器 如果 放了      更新时间:2023-09-26

所以我有两个插件,它们是数据表和日期选择器,如果我把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);
        }
    });
});