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