what I am tring to do:
I am tring to filter the data using the datatimepicker from https://www.jqueryscript.net/time-clock/Clean-jQuery-Date-Time-Picker-Plugin-datetimepicker.html
What i have tried yet:
I tried the simple date picker with php and mysql and it worked, i used ajax with jquery in that example. When i am tring to do with datetime picker the same thing it did not worked.
<?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>
