Date Range Search Jquery DatePicker using Ajax PHP with MySQL

Date Range Search Jquery DatePicker using Ajax PHP with MySQL

In this Post We Will Explain About is Date Range Search Jquery DatePicker using Ajax PHP with MySQL With Example and Demo.Welcome on Live24u.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to PHP MYSQL Date Range Search with Jquery DatepickerExample

In this post we will show you Best way to implement Date Range Search With Jquery Datepicker Using Ajax, Php Mysql, hear for Ajax with PHP MySQL Date Range Search using jQuery DatePickerwith Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

Also Read :   Create Dynamic Image Fancybox Gallery with jQuery, PHP & MySQL

You can download source code and Demo from below link.




Database Structure

CREATE TABLE `users` (
`user_number` int(10) NOT NULL,
`user_name` varchar(100) NOT NULL,
`user_items` varchar(100) NOT NULL,
`user_reg_date` date NOT NULL,
`user_age` double(11,2) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

<!-- INSERT Records-->
INSERT INTO `users` (`user_number`, `user_name`, `user_items`, `user_reg_date`, `user_age`) VALUES
(1, 'devsena', 'laptop', '2018-10-23', 50),
(2, 'bhala', 'redmi', '2018-10-24', 75),
(3, 'nagrjun', 'laptop 5s', '2018-10-24', 29),
(4, 'liveds', 'Macbook Pro', '2018-10-26', 17),
(5, 'madhuri', 'new Air 2', '2018-10-27', 47),
(6, 'mayur', 'lenovo car', '2018-10-27', 26),
(7, 'karishma', 'redmi', '2018-10-28', 75),
(8, 'divya', 'redmi', '2018-10-30', 75),
(9, 'bhavana', 'laptop 7', '2018-11-07', 54),
(10, 'meena', 'onida TV', '2018-11-14', 19);

index.php

<?php
	$db_conn = mysqli_connect("localhost", "root", "liv@#$%^&121", "livetutp");
	$live_query = "SELECT * FROM users ORDER BY user_number desc";
	$sql_query = mysqli_query($db_conn, $live_query);
?>
<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Date Range Search with jQuery DatePicker using Ajax, PHP & MySQL</title>
	<link rel="stylesheet" href="bootstrap.min.css"/>
	<link rel="stylesheet" href="jquery-ui.css"/>
</head>
<body>
<hr/>
<div class="container">
<h2>Step By step Date Range Search with jQuery simple DatePicker using Ajax with PHP & MySQL</h2>
<hr/>
<hr/>
<!-- Form Date-->
<div class="col-sm-2">
<input type="text" name="From" id="From" class="form-control" placeholder="select From Date"/>
</div>
<!-- To Date-->
<div class="col-sm-2">
<input type="text" name="to" id="to" class="form-control" placeholder="select To Date"/>
</div>
<!-- Range Button-->
<div class="col-sm-8">
<input type="button" name="range" id="range" value="diff - Range" class="btn btn-success"/>
</div>
<!-- All div clearfix-->
<div class="clearfix"></div>
<hr/>
<div id="user_order">
<table class="table table-bordered">
<tr>
<th>User Number</th>
<th>User Name</th>
<th>User Item</th>
<th>User Reg Date</th>
<th>User Age</th>
</tr>
<?php
	while($data_row= mysqli_fetch_array($sql_query))
	{
		?>
		<tr>
		<td><?php echo $data_row["user_number"]; ?></td>
		<td><?php echo $data_row["user_name"]; ?></td>
		<td><?php echo $data_row["user_items"]; ?></td>
		<td><?php echo $data_row["user_reg_date"]; ?></td>
		<td>$ <?php echo $data_row["user_age"]; ?></td>
		</tr>
		<?php
	}
?>
</table>
</div>
</div>
	<script src="jquery.min.js"></script>
	<script src="jquery-ui.js"></script>
<script>
$(document).ready(function(){
	$.datepicker.setDefaults({
		dateFormat: 'yy-mm-dd'
	});
	<!-- Form or to Date-->
	$(function(){
		$("#From").datepicker();
		$("#to").datepicker();
	});
	<!-- Form or To get Range Date-->
	$('#range').click(function(){
		var From = $('#From').val();
		var to = $('#to').val();
		//check conditions
		if(From != '' && to != '')
		{
			// call ajax using range.php file
			$.ajax({
				url:"get_range.php",
				method:"POST",
				data:{From:From, to:to},
				success:function(data)
				{
					$('#user_order').html(data);
				}
			});
		}
		else
		{
			alert("Please Select the Date");
		}
	});
});
</script>
</body>
</html>




Also Read :   Vuejs Dynamic Displaying Lists v-for directive

get_range.php

<?php
// get_range.php
if(isset($_POST["From"], $_POST["to"]))
{
	$db_conn = mysqli_connect("localhost", "root", "liv@#$%^&121", "livetutp");
	$data_res_list = '';
	$live_query = "SELECT * FROM users WHERE user_reg_date BETWEEN '".$_POST["From"]."' AND '".$_POST["to"]."'";
	$sql_query = mysqli_query($db_conn, $live_query);
	$data_res_list .='
	<table class="table table-bordered">
	<tr>
	<th>Users Number</th>
	<th>User Number</th>
	<th>Usres Item</th>
	<th>User Reg Date</th>
	<th>user Age</th>
	</tr>';
	if(mysqli_num_data_rows($sql_query) > 0)
	{
		while($data_row = mysqli_fetch_array($sql_query))
		{
			$data_res_list .='
			<tr>
			<td>'.$data_row["user_number"].'</td>
			<td>'.$data_row["user_name"].'</td>
			<td>'.$data_row["user_items"].'</td>
			<td>'.$data_row["user_reg_date"].'</td>
			<td>'.$data_row["user_age"].'</td>
			</tr>';
		}
	}
	else
	{
		$data_res_list .='
		<tr>
		<td colspan="5">No Users Item Found</td>
		</tr>';
	}
	$data_res_list .='</table>';
	echo $data_res_list;
}
?>

You can download source code and Demo from below link.




Example

I hope you have Got What is PHP MySQL Date Range Search with jQuery DatePicker PHP And how it works.I would Like to have FeadBack From My Blog(live24u.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(live24u.com) Are Most Always Welcome.

   

Add a Comment

Your email address will not be published.