CODEWITHSUNDEEP
javascriptjqueryjquery-uidatatables
Vista
Vista

Reputation: 201

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

So I have 2 plugins they are datatable and datepicker, If i put the javascript the datepicker the datatables no longer work, and if I remove it the datepicker doesn't work.

Here's the code for date picker

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

Here's the code for datatables

<script src="assets/js/jquery.dataTables.min.js"></script>
<script>
        $(document).ready(function(){
            $('#listTable').DataTable();
        });
    </script>

Well here my whole code for index where I put all the javascript functions and link

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

Sorry for the long post, I don't know what to do and what is the error :(

Upvotes: 0

Views: 196

Answers (1)

Mi-Creativity
Mi-Creativity

Reputation: 9664

If you check this JSFiddle, I didn't do anything to your code except cleaning it, combining the 3 script tags into one, wrapped the $(document).ready() function all around your js code and that's it - well beside creating the html static content - and you see that everything is working like it should, all datepickers, setting 1935 to the second from and full control of Datatable over #listTable.. everything working and this is the clean version of your JS code:

$(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);
        }
    });

});

Upvotes: 1

Related Questions