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

Read Also:  MySQL BETWEEN Operators with WHERE Condition

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", "[email protected]#$%^&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>

get_range.php

<?php
// get_range.php
if(isset($_POST["From"], $_POST["to"]))
{
	$db_conn = mysqli_connect("localhost", "root", "[email protected]#$%^&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;
}
?>

Example

Read Also:  how to add and remove textbox dynamically in javascript?

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(Pakainfo.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(Pakainfo.com) Are Most Always Welcome.


Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  Internal server error with Laravel FIX
  2. Read Also:  How to display cross domain json data using Jquery
  3. Read Also:  PHP program to print patterns of numbers and stars
  4. Read Also:  how to display image in popup window using javascript or jQuery?
  5. Read Also:  Multi Dimensional Array Sorting in Php
  6. Read Also:  Hello World with ASP.NET Core - Install ASP.NET Core steps
  7. Read Also:  how to insert date in mysql using php?
  8. Read Also:  PHP check laravel version using command
  9. Read Also:  how to insert date in mysql using php?
  10. Read Also:  PHP check laravel version using command
CLOSEX