Search jQuery

jQuery Forum

Using jQuery UI

Tzu Yu

I want to use the datepicker to query the data between two days.

in Using jQuery UI • 8 years ago

I want to use the datepicker to query the data from MySQL database.

I add the 00:00:00 and 23:59:59 because my data type is timestamp ,but the code can't work.

Please help me !

This is my code.

test_jquery2.php

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Computer Facilities Temperature & Humidity Log</title>
<style type="text/css">
.table_titles, .table_cells_odd, .table_cells_even {
padding-right: 20px;
padding-left: 20px;
color: #000;
}
.table_titles {
color: #FFF;
background-color: #666;
}
.table_cells_odd {
background-color: #CCC;
}
.table_cells_even {
background-color: #FAFAFA;
}
table {
border: 2px solid #333;
}
body { font-family: "Trebuchet MS", Arial; }
</style>
<link rel="stylesheet" href="jquery-ui.css">
<script src="jquery-1.11.2.js"></script>
<script src="jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#sdatepicker" ).datepicker({
dateFormat: "yy-mm-dd",
constrainInput: false
});
$( "#edatepicker" ).datepicker({
dateFormat: "yy-mm-dd",
constrainInput: false
});
});
$(document).ready(function(){
$("#generate_log").click(function(){
var sdatepicker=jQuery("#sdatepicker").val() +" 00:00:00";
var edatepicker=jQuery("#edatepicker").val() +" 23:59:59";
var data =
{
sdatepicker:sdatepicker ,
edatepicker:edatepicker
}
jQuery.ajax({
type: "POST",
url: "test.php",
data: data,
success: function(response){
}
});
});
});
</script>
</head>
<body>
<h1>Computer Facilities Temperature & Humidity Log</h1>
Start Date: <input type="text" id="sdatepicker">      
End Date: <input type="text" id="edatepicker">      
<input type="button" name="generate_log" id="generate_log" value="Generate Log" />
</body>
</html>

test.php

<?php
// Start MySQL Connection
include('dbconnect.php');
?>
<html>
<head>
<style type="text/css">
.table_titles, .table_cells_odd, .table_cells_even {
padding-right: 20px;
padding-left: 20px;
color: #000;
}
.table_titles {
color: #FFF;
background-color: #666;
}
.table_cells_odd {
background-color: #CCC;
}
.table_cells_even {
background-color: #FAFAFA;
}
table {
border: 2px solid #333;
}
body { font-family: "Trebuchet MS", Arial; }
</style>
</head>
<table border="0" cellspacing="0" cellpadding="4">
<tr>
<td class="table_titles">ID</td>
<td class="table_titles">Date and Time</td>
<td class="table_titles">Temperature</td>
<td class="table_titles">Humidity</td>
</tr>
<?php
// Retrieve all records and display them
error_reporting(0);
$result = mysql_query("SELECT * FROM thdata WHERE event BETWEEN '".$sdatepicker."' AND '".$edatepicker."' ORDER BY id ASC");
// Used for row color toggle
$oddrow = true;
// process every record
while( $row = mysql_fetch_array($result) )
{
if ($oddrow)
{
$css_class=' class="table_cells_odd"';
}
else
{
$css_class=' class="table_cells_even"';
}
$oddrow = !$oddrow;
echo '<tr>';
echo ' <td'.$css_class.'>'.$row["id"].'</td>';
echo ' <td'.$css_class.'>'.$row["event"].'</td>';
echo ' <td'.$css_class.'>'.$row["celsius"].'</td>';
echo ' <td'.$css_class.'>'.$row["humidity"].'</td>';
echo '</tr>';
}
?>
</table>
</body>
</html>

Replies(3)

kbwood.au

Re: I want to use the datepicker to query the data between two days.

8 years ago

Your JS looks fine, although it could be simplified a bit:

$(function() {
$('#sdatepicker,#edatepicker').datepicker({
dateFormat: 'yy-mm-dd',
constrainInput: false
});
$("#generate_log").click(function() {
jQuery.ajax({
type: 'POST',
url: 'test.php',
data: {
sdatepicker: $('#sdatepicker').val() + ' 00:00:00',
edatepicker: $('#edatepicker').val() + ' 23:59:59'
},
success: function(response) {
}
});
});
});

The problem appears to be in your PHP. You are using the variables $sdatepicker and $edatepicker in your query, but these haven't been defined anywhere.

Tzu Yu