Question

所以我有2个插件，它们是数据表和datepicker，如果我把javascript的datepicker数据表不再起作用，如果我删除它，则datepicker不起作用。

这是日期选择器的代码

 <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>

很抱歉这篇长篇文章，我不知道该怎么做以及错误是什么：（

Answer 1

如果您选中此JSFiddle，我对您的代码执行了任何操作，除非清除它，将3个script标记合并为一个，将$(document).ready()函数包裹起来你的js代码和那个 - 除了创建html静态内容之外 - 你看到一切都像它应该的那样，所有的日期选择器，将1935设置为第二个from完全控制Datatable over #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);
        }
    });

});

如果我使用datepicker函数，日期表根本不起作用

1 个答案: