Retrieving data using two datetimepicker (mysql, PDO and AJAX)

See more:

PHP

Ajax

MySQL

PDO

Hi! I'm trying to retrieve data from database using two datetimepicker but when set date rage to the datetimepicker and I click button all the data are displaying. Below are my whole codes. Please help me. Thank you so much in advance.

What I have tried:

index.php

<tbody id = "load_data">
						<?php

							$db = new PDO('mysql:host=localhost;dbname=db_search;charset=utf8mb4', 'root', '');
    						$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    						$db->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);
							
							$sql = "select * from book ORDER BY date_published ASC";
							$stmt = $db->prepare($sql);
							$stmt->execute();
							//while($row=$stmt->fetch(PDO::FETCH_ASSOC)) {
							foreach($stmt as $row) {
						?>
						<tr>
							<td><?php echo $row['ISBN']?></td>
							<td><?php echo $row['title']?></td>
							<td><?php echo $row['author']?></td>
							<td><?php echo date("m/d/Y", strtotime($row['date_published']))?></td>
						</tr>
						<?php
							}
						?>
					</tbody>

get_data.php

<?php
$date1 = date("Y-m-d", strtotime($_POST['date1']));
$date2 = date("Y-m-d", strtotime($_POST['date2']));

$db = new PDO('mysql:host=localhost;dbname=db_search;charset=utf8mb4', 'root', '');
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$db->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);
	
$sql = "select * from book where date_published";
$stmt = $db->prepare($sql);
$stmt->execute(); 
$row_count = $stmt->rowCount();
if($row_count > 0){
	foreach($stmt as $row) {
	?>
	<tr>
		<td><?php echo $row['ISBN']?></td>
		<td><?php echo $row['title']?></td>
		<td><?php echo $row['author']?></td>
		<td><?php echo date("m/d/Y", strtotime($row['date_published']))?></td>
	</tr>
	<?php
	}
}else{
		echo '
		<tr>
			<td colspan = "4"><center>Record Not Found</center></td>
		</tr>
		';
}
	?>

ajax.js

$(document).ready(function(){
	$('#date1').datepicker();
	$('#date2').datepicker();
	$('#btn_search').on('click', function(){	
		if($('#date1').val() == "" || $('#date2').val() == ""){
			alert("Please enter something on the text field");
		}else{
			$date1 = $('#date1').val();
			$date2 = $('#date2').val();
			$('#load_data').empty();
			$loader = $('<tr ><td colspan = "4"><center>Searching....</center></td></tr>');
			$loader.appendTo('#load_data');
			setTimeout(function(){
				$loader.remove();
				$.ajax({
					url: 'get_data.php',
					type: 'POST',
					data: {
						date1: $date1,
						date2: $date2
					},
					success: function(res){
						$('#load_data').html(res);
					}
				});
			}, 3000);
		}	
	});
	
	$('#reset').on('click', function(){
		location.reload();
	});
});