<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Bootstrap Responsive Date Pagination Using PHP MYSQL</title>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="all" href="daterangepicker.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="css/daterangepicker.css" rel="stylesheet" media="screen">
<link href="css/sticky-footer.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
<style type="text/css">
.demo { position: relative; }
.demo i {
position: absolute; bottom: 10px; right: 24px; top: auto; cursor: pointer;
}
</style>
</head>

<body>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-72704285-1', 'auto');
ga('send', 'pageview');

</script>
<!-- Wrap all page content here -->
<div id="wrap">

<div class="container" >
<div class="row">
<h3 class="text-center">Bootstrap Responsive Date Filteration Using PHP MYSQL - HackandPHP Programming Blog</h3>
<div class="col-lg-1 col-md-1 col-sm-1"></div>
<div class="col-lg-10 col-md-10 col-sm-10">
<div class="col-md-4 col-md-offset-4 demo">
<h4>Select the date to filter records</h4>
<input type="text" id="config-demo" class="form-control">
<i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
</div>


<script type="text/javascript">
$(function() {

function cb(start, end) {
$('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
}
cb(moment().subtract(29, 'days'), moment());

$('#reportrange').daterangepicker({
ranges: {
'Today': [moment(), moment()],
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
}
}, cb);

});
</script>
</div>
</div>
<div class="col-lg-1 col-md-1 col-sm-1"></div>
</div>
<hr>
<div class="col-lg-1 col-md-1 col-sm-1"></div>
<div class="col-lg-10 col-md-10 col-sm-10">
<div class="loader text-center" style="display:none"><img src="img/loading.gif"></div>
<div class="response"></div>
</div>
<div class="col-lg-1 col-md-1 col-sm-1"></div>
</div>
</div>
</div>



<script type="text/javascript" src="js/moment.min.js"></script>
<script type="text/javascript" src="js/daterangepicker.js"></script>
<script type="text/javascript">
$(document).ready(function() {


$('.demo i').click(function() {
$(this).parent().find('input').click();
});


updateConfig();

function updateConfig() {
var options = {};
options.opens = "center";
options.ranges = {
'Today': [moment(), moment()],
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
};
$('#config-demo').daterangepicker(options, function(start, end, label) {
var startDate = start.format('YYYY-MM-DD'); var endDate = end.format('YYYY-MM-DD');
passDate(startDate,endDate);
//console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')');
});
}

});

function passDate(startDate,endDate) {
$('.loader').show();
//date = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate();
$.ajax({
type: 'POST', // define the type of HTTP verb we want to use (POST for our form)
url: 'date-filteration.php', // the url where we want to POST
data: 'startDate='+startDate+'&endDate='+endDate, // our data object
})
// using the done promise callback
.done(function(data) {
$('.loader').hide();
// log data to the console so we can see
$('.response').html(data);
// here we will handle errors and validation messages
});
}

</script>
</body>
</html>