Bootstrap Responsive Date range Filtering Using PHP Ajax Mysql

14
05Bootstrap Responsive Date range Filtering Using PHP Ajax Mysql

Adding up a date through input elements in forms can be cumbersome if you do not use a date picker. There are some plugins for jQuery and Bootstrap that make this process easy and simple – yet implementing a powerful and advanced tool. The tool described below is called “Date Range Picker for Bootstrap” and is ready to go with a very simple implementation.

For more tutorial regarding date range picker. Kindly visit Date Range Picker for Bootstrap

Customizing the date range picker.

The date range picker can be custom designed for a chain of eventualities. To begin with, you can limit it to 1 date as opposed to a selection. Moreover you may decide if time ought to also be choosen or not. Every other fantastic customization feature are the buttons for predefined ranges, which can be set to ranges normally chosen by users of your application.

Subsequently you can additionally customize the localization to fit your language and region. This facilitates each translations of the used texts, however additionally week days, start of week and so forth.

The use of this date range picker significantly improves the look and sense of your form through including a expert and precise searching date variety choice alternative for your users. The integrated validation further improves the usability via making the person privacy to valid or invalid date selections.

How to search between two dates using MYSQL or PHP

Here is the sample example of searching the records and filter it by date wise. The filtration is done between two specific dates. When the user select the start and end date from the date picker, the ajax is been call and the request is to send to the date-filtration.php. It receives the two date and execute the query by filtering the data between two dates. Later the response is send back to the Ajax and display them in the browser.

Bootstrap Date range Filtration with PHP Ajax Mysql

HTML CODE:


            Select the date to filter records

Jquery - Date Filtration Call

$(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);	  
		   });
          
        }

      });

function passDate(startDate,endDate) {
    $('.loader').show();
    $.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
        });
}

Date Filtration - PHP

   define("HOST", "localhost"); //Define a hostname
   define("USER", "root");      //Define a username
   define("PASSWORD", "");		//Define a password
   define("DB", "hackandphp");  //Define a database

   $con = mysqli_connect(HOST, USER, PASSWORD, DB) OR DIE("Error in  connecting DB : " . mysqli_connect_error());  //Database connection
	
	if((!empty($_POST['startDate'])&&(!empty($_POST['endDate'])))) {	// Check whether the date is empty			
		$startDate = date('Y-m-d',strtotime($_POST['startDate']));
		$endDate = date('Y-m-d',strtotime($_POST['endDate']));
		
		$result = mysqli_query($con,'SELECT * from countries where date between  "'.$startDate.'" and "'.$endDate.'"');  // Execute the query
		$num_rows = mysqli_num_rows($result); //Check whether the result is 0 or greater than 0.
		if($num_rows > 0){
			$str = '';
    		while($row = mysqli_fetch_array($result,MYSQLI_ASSOC)){  //Fetching the data from the database
				$str.='
				
				
				
				
					
					'.$row['countries_name'].' 
					ISO Code :'.$row['countries_iso_code'].'
					ISD Code :'.$row['countries_isd_code'].'
					
					
					Created Date: '.$row['date'].'
					
';
			}
			$str.= '';
			echo $str;
		}else{
			echo "No record found";	
		}
	
	} else{
		echo "No record found";
	}