我想使用Datetime Picker使用php从mysql过滤数据

时间:2019-04-29 10:49:03

标签: php jquery mysql datetimepicker

我打算做什么:

我正在尝试使用https://www.jqueryscript.net/time-clock/Clean-jQuery-Date-Time-Picker-Plugin-datetimepicker.html

中的datatimepicker过滤数据

我尝试过的事情:

我用php和mysql尝试了简单的日期选择器,它起作用了,在该示例中我将ajax与jquery一起使用。 当我尝试使用日期时间选择器时,它没有起作用。

<?php
 $conn = mysqli_connect('localhost','root','','canvasjs_db');

if(!$conn){
die("connection failed". mysqli_connect_error());
}

$query = "SELECT * FROM `temp_log` ORDER BY uid asc";  
$result1 = mysqli_query($conn, $query); 


if(isset($_POST['submit'])){
$f_date = $_POST['from_datetime'];
$t_date = $_POST['from_datetime'];

$query = "SELECT * FROM temp_log where timestamp BETWEEN '$f_date' AND 
'$t_date'  ORDER BY order_id desc";  
$result = mysqli_query($conn, $query); 
if($result === FALSE) { 
mysql_error(); // TODO: better error handling
}

}

mysqli_close($conn);
?>
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

    <!--Fontawesome CDN-->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    ................
    <link rel="stylesheet" type="text/css" href="jquery.datetimepicker.min.css">
    <script src="jquery.js"></script>
    <script src="jquery.datetimepicker.full.js"></script>
</head>
<body>
    <form method="POST" action="index2.php">
        <input type="text" name="from_datetime" id="from_datetime">
        <input type="text" name="to_datetime" id="to_datetime">
        <input type="submit" name="submit" id="submit">
    </form>
    <div id="order_table">  
        <table class="table table-bordered">  
            <tr>  
                <th width="5%">ID</th>  
                <th width="30%">Device ID</th> 
                <th width="43%">lat</th>
                <th width="43%">long</th>                              
                <th width="43%">Temperature</th>
                <th width="10%">Humidity</th>  
                <th width="12%">TimestampDevice</th> 
                <th width="12%">Time</th>
                <th width="12%">TImestamp</th>                             
            </tr>  
            <?php  
            while($row = mysqli_fetch_array($result1))  
            {  
                ?>  
                <tr>  
                    <td><?php echo $row["uid"]; ?></td>  
                    <td><?php echo $row["deviceid"]; ?></td>  
                    <td><?php echo $row["lat"]; ?></td> 
                    <td><?php echo $row["long"]; ?></td>                
                    <td><?php echo $row["temp"]; ?></td>               
                    <td> <?php echo $row["humidity"]; ?></td>  
                    <td><?php echo $row["notedtime"]; ?></td> 
                    <td><?php echo $row["formatedate"]; ?></td> 
                    <td><?php echo $row["timestamp"]; ?></td>

                </tr>  
                <?php  
            }  
            ?>  
        </table>  
    </div>  

    <script type="text/javascript">
        $("#from_datetime").datetimepicker();
        $("#to_datetime").datetimepicker();

    </script>
</body>
</html>
<script type="text/javascript">
    $(function(){  
              $("#from_datetime").datetimepicker();
        $("#to_datetime").datetimepicker();  
           }); 
    $('#submit').click(function(){  
                var from_date = $('#from_datetime').val();  
                var to_date = $('#to_datetime').val();  

                if(from_date != '' && to_date != '')  
                {  
                     $.ajax({  
                          url:"index2.php",  
                          method:"POST",  
                          data:{from_date:from_date, to_date:to_date},  
                          success:function(data)  
                          {  
                               $('#order_table').html(data);  
                          }  
                     });  
                }  
                else  
                {  
                     alert("Please Select Date");  
                }  
                 });
</script>

0 个答案:

没有答案