CodeIgniter Forums

Full Version: How to use a datepicker filter in codeIgniter ?
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
[attachment=1441]I want to make a date filter only by year for my event page so people can filter by year so they can see what events are happening by year, but many people are using between date filter which is hard for me to understand, is there anyone can help me build a datepicker filter by year  Huh 

this is my controller : 

Code:
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Exhibitions extends CI_Controller {
   
   function __construct() {
       parent::__construct();

       $this->load->helper('general_helper');
       $this->load->helper('date');
       //load pagination library
       $this->load->library('pagination');
       //load post model
       $this->load->model('exhibitions_model');
       //per page limit
       $this->perPage = 10;
   }
   
   public function index(){
       $data = array();
       
       //get rows count
       $conditions['returnType'] = 'count';
       $totalRec = $this->exhibitions_model->getRows($conditions);
       
       //pagination config
       $config['base_url'] = 'http://localhost/demo1/index.php/exhibitions/index';
       $config['uri_segment'] = 3;
       $config['total_rows']  = $totalRec;
       $config['per_page']    = $this->perPage;
       
       //styling
       $config['num_tag_open'] = '<li class="page-item">';
       $config['num_tag_close'] = '</li>';
       $config['cur_tag_open'] = '<li class="page-item active"><a class="page-link" href="javascript:void(0);">';
       $config['cur_tag_close'] = '</a></li>';
       $config['next_link'] = 'Next';
       $config['prev_link'] = 'Prev';
       $config['next_tag_open'] = '<li class="page-item">';
       $config['next_tag_close'] = '</li>';
       $config['prev_tag_open'] = '<li class="pg-prev">';
       $config['prev_tag_close'] = '</li>';
       $config['first_tag_open'] = '<li>';
       $config['first_tag_close'] = '</li>';
       $config['last_tag_open'] = '<li>';
       $config['last_tag_close'] = '</li>';
       
       //initialize pagination library
       $this->pagination->initialize($config);
       
       //define offset
       $page = $this->uri->segment(3);
       $offset = !$page?0:$page;
       
       //get rows
       $conditions['returnType'] = '';
       $conditions['start'] = $offset;
       $conditions['limit'] = $this->perPage;
       $data['omg_event'] = $this->exhibitions_model->getRows($conditions);
       
       //load the list page view
       
      $this->load->view('templates/header', $data);
     $this->load->view('pages/exhibitions', $data);
      $this->load->view('templates/footer');
   }
   
}


this is my model : 
Code:
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Exhibitions_model extends CI_Model{
   /*
    * Get posts
    */
   function getRows($params = array()){
       $this->db->select('*');
       $this->db->from('omg_event');
       $this->db->order_by("date_start", "desc");

       if(array_key_exists("event_id",$params)){
           $this->db->where('event_id',$params['event_id']);
           $query = $this->db->get();
           $result = $query->row_array();
       }else{
           //set start and limit
           if(array_key_exists("start",$params) && array_key_exists("limit",$params)){
               $this->db->limit($params['limit'],$params['start']);
           }elseif(!array_key_exists("start",$params) && array_key_exists("limit",$params)){
               $this->db->limit($params['limit']);
           }
           
           if(array_key_exists("returnType",$params) && $params['returnType'] == 'count'){
               $result = $this->db->count_all_results();
           }else{
               $query = $this->db->get();
               $result = ($query->num_rows() > 0)?$query->result_array():FALSE;
           }
       }

       //return fetched data
       return $result;
   }
}
?>

this is my view : 

Code:
<head>
   <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css" rel="stylesheet">  
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>  
   <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script>

 <!-- jQuery -->
 <script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-1.12.4.js"></script>
 <!-- DataTables -->
 <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

</head>


<!--===============================
=            Hero Area            =
================================-->

<section class="hero-area bg-1 text-center overly">
 <!-- Container Start -->
 <div class="container">
   <div class="row">
     <div class="col-md-12">
       <!-- Header Contetnt -->
       <div class="content-block">

       <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
       <div class="carousel-inner">
         <div class="carousel-item active">
           <img src="<?php echo base_url() ?>img/ads/ad1.jpg" class="d-block w-100" alt="...">
           <div class="carousel-caption d-none d-md-block">
             <br><br><br><br><br><br>
          <h2>Welcome to Industrial Guide Asia</h2>
           <p>As the annual industrial directory, we provides you up-to-date information from the manufacturing, engineering and trading companies classifying advertisements and listing Products & Services, Brand Titles and Trade Shows. Click the button bellow to see around the website !</p>
         </div>
         </div>

         <div class="carousel-item">
           <img src="<?php echo base_url() ?>img/ads/ad2.jpg" class="d-block w-100" alt="...">
           <div class="carousel-caption d-none d-md-block">
             <br><br><br><br><br><br>
           <h2>Our Website Is upgrading</h2>
           <p>Please bare with us if you encounter some problems when you are visiting our websites. We are fixing our website to give you a good website that will be more corporate and user friendly.  </p>
         </div>  
         </div>

         <div class="carousel-item">
           <img src="<?php echo base_url() ?>img/ads/ad3.gif" class="d-block w-100" alt="...">
           <div class="carousel-caption d-none d-md-block">
             <br><br><br><br><br><br>
             <h2>Don't miss every Event this Year</h2>
             <p>Visit the Event page to check what Event that will be held this Year</p>
           </div>
         </div>
       </div>

       <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
         <span class="carousel-control-prev-icon" aria-hidden="true"></span>
         <span class="sr-only">Previous</span>
       </a>
       <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
         <span class="carousel-control-next-icon" aria-hidden="true"></span>
         <span class="sr-only">Next</span>
       </a>
     </div>
         
       </div>
     
       
     </div>
   </div>
 </div>
 <!-- Container End -->
</section>

    <!--==========================
     Services Section
   ============================-->
       <section class="blog single-blog section">
   <section id="services">
     <div class="container">
         <div class="section-title">
         <h2>EXHIBITIONS ROADSHOWS & SEMINAR</h2>
         <p></p>
       </div>      

<table class="table table-hover">
 <div class="category-search-filter">
         <div class="row">
           <div class="col-md-3">
           Filter
             <div class="widget search p-0">
           <div class="input-group">
              <input type="text" name="order_end_date" value="" class="date-own form-control" id="order-end-date" placeholder="Search">
                <button name="filter_order_filter" type="button" class="btn" id="filter-order-filter" value="filter"><i class="fa fa-search fa-fw"></i></button>
               
             </div>
         </div>


 <script type="text/javascript">
     $('.date-own').datepicker({
        minViewMode: 2,
        format: 'yyyy'
      });
 </script>
           </div>
         </div>
       </div>
<?php if(!empty($omg_event)): foreach($omg_event as $post): ?>
 <thead>
   <tr>
   

   </tr>
 </thead>
 <tbody>
 

   <tr>
     <th scope="row"> <?php if(!empty($post['thumb_img'])){ ?>
       <img src="<?php echo base_url().image('upload/'.$post['thumb_img'],120,53); ?>" alt="">
      <?php } ?></th>
     <td width="15%"><?php echo  dateFormat($post['date_start'], 'd/m/Y').' - '.dateFormat($post['date_end'], 'd/m/Y');?></td>
     <td><?php echo $post['name'];?></td>
     <td><?php echo $post['address'];?></td>
     <td width="15%""><a href="">Send Enquiry</a></td>
   </tr>
 <?php endforeach; else: ?>
               <tr><td colspan="3">Post(s) not found......</td></tr>
               <?php endif; ?>
 </tbody>
</table>

    <!-- Pagination -->
       <nav aria-label="Page navigation example">
         <ul class="pagination">
           <?php echo $this->pagination->create_links(); ?>
         </ul>
       </nav>
     
     </div>    

     

     </div>
   </section><!-- #services -->
 </section>
Here is a jQuery version, you should be able to convert the php code over to CodeIgniter.

PHP MySQL Date Range Search with jQuery DatePicker
@firas,

I have a suggestion. You also might want to consider using DataTables (https://datatables.net/). It has built in search features.
(02-21-2019, 08:47 PM)php_rocs Wrote: [ -> ]@firas,

I have a suggestion.  You also might want to consider using DataTables (https://datatables.net/).  It has built in search features.

I already try this, but when I link it to the database, the DataTables plugin disappear
@firas,

If the DataTables plugin disappears then something is configured wrong. What was the error messages?
(02-24-2019, 07:58 PM)php_rocs Wrote: [ -> ]@firas,

If the DataTables plugin disappears then something is configured wrong.  What was the error messages?

there was no error message, it just shows all data from the database without the DataTables plugin, I tried using another method using jquery search filter like this one : 

Code:
<script>
function myFunction2() {
 var input, filter, table, tr, td, i, th;
 input = document.getElementById("search");
 filter = input.value.toUpperCase();
 table = document.getElementById("myTable1");
 tr = table.getElementsByTagName("tr");
 for (i = 0; i < tr.length; i++) {
   td = tr[i].getElementsByTagName("td")[1];
   if (td) {
     if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
       tr[i].style.display = "";
     } else {
       tr[i].style.display = "none";
     }
   }      
 }
}
</script>
 
but it only searches on the first page without searching on the page of my pagination, like if my data that was on 2015 on page 5, and when I search 2015, it only search on the first page.
@firas,

Did you configure DataTable to your table of data by using the table id? What code did you use for DataTables?
(02-25-2019, 12:04 PM)php_rocs Wrote: [ -> ]@firas,

Did you configure DataTable to your table of data by using the table id?  What code did you use for DataTables?

sorry, forgot to inform that i already got it, the problem was i import the wrong jquery for the datatable.