Bootstrap Date Range Picker

The Date Range Picker can be attached to any webpage element to pop up two calendars for selecting dates,
times, or from predefined ranges like "Last 30 Days".

Date Range Picker relies on Bootstrap, jQuery and Moment.js. Include the required scripts and stylesheet in
your page:

Then attach the picker to the element you want to trigger it:

<!-- Include Required Prerequisites -->

<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
1 <script type="text/javascript"
2 src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
3 <link rel="stylesheet" type="text/css"
4 href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" />
5
6 <!-- Include Date Range Picker -->
7 <script type="text/javascript"
8 src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css"
href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />

CodeIgniter (v3.1.2) - PHP framework

Create Controller In Application Folder : DatatableControl.php

1 class DatatableControl extends CI_Controller {

2
3 public function __construct()
4 {
5 parent::__construct();
6
7 $this->load->model('Order');
8
9 }
10 public function index() {
11 $this -> load -> view('header');
12 $this -> load -> view('datatable');
13 $this -> load -> view('footer');
14
15 }
16 public function ajax_list()
17 {
18 $this->load->model('Order');
19 $list = $this->order->get_datatables();
20
21 $data = array();
22 $no = $_POST['start'];
23 foreach ($list as $dattable) {
24 $no++;
25 $row = array();
26 $row[] = $no;
27 $row[] = $dattable->customerNumber;
28 $row[] = $dattable->customerName;
29 $row[] = $dattable->paymentDate;
30 $row[] = $dattable->amount;
31 $data[] = $row;
32 }
33 $output = array(
34 "draw" => $_POST['draw'],
35 "recordsTotal" => $this->Order->count_all(),
36 "recordsFiltered" => $this->Order->count_filtered(),
37 "data" => $data
38 );
39 //output to json format
40 $x = new stdClass();
41 $oVal = (object)array(
42 "Dataval"=>$this->db->last_query()
43 );
44 echo json_encode($output);
45 }
46 }

Create Model In Application Folder : Order.php

class Order extends CI_Model {

1
var $table='customers';
2 var $column_order=array(null,
"customers.customerNumber","customers.customerName","customers.phone","payments.payment
3 Date", null); //set column field database for datatable orderable
var
4 $column_search=array("customers.customerNumber","customers.customerName","customers.pho
ne","payments.paymentDate"); //set column field database for datatable searchable
5 var $order=array('customerNumber'=> 'desc'); // default order

6 private function _get_datatables_query() {

$this->db-
7 >select('customers.customerNumber,customers.customerName,payments.paymentDate,payments.
amount', FALSE);
8 $this->db->from($this->table);

9 $this->db->join('payments', 'payments.customerNumber =
1 customers.customerNumber', 'left');
0
1 $start_date=$_POST['minDate'];
1 $end_date=$_POST['maxDate'];
1 $this->db->where('payments.paymentDate BETWEEN "'. $start_date. '" and "'.
2 $end_date.'"');
1
3 $i=0;
1 foreach ($this->column_search as $item) // loop column
4 {
1 if($_POST['search']['value']) // if datatable send POST for search
5 {
1 if($i===0) // first loop
6 {
1 $this->db->like($item, $_POST['search']['value']);
7 $this->db->where('payments.paymentDate BETWEEN
1 "'. $start_date. '" and "'. $end_date.'"');
8 }
1 else {
9 $this->db->or_like($item, $_POST['search']['value']);
2 $this->db->where('payments.paymentDate BETWEEN
0 "'. $start_date. '" and "'. $end_date.'"');
2 }
1 if(count($this->column_search) - 1==$i) {}
2 //$this->db->group_end(); //close bracket
2 }
2 $i++;
3 }
2 if(isset($_POST['order'])) // here order processing
4 {
2 $this->db->order_by($this->column_order[$_POST['order']['0']['column']],
5 $_POST['order']['0']['dir']);
2 }
6 else if(isset($this->order)) {
2 $order=$this->order;
7 $this->db->order_by(key($order), $order[key($order)]);
2 }
8 }
2
9 function get_datatables() {
3 $this->_get_datatables_query();
0 if($_POST['length'] !=-1) $this->db->limit($_POST['length'], $_POST['start']);
3 $query=$this->db->get();
1 return $query->result();
3 }
2
3 function count_filtered() {
3 $this->_get_datatables_query();
3 $query=$this->db->get();
4 return $query->num_rows();
3 }
5
3 public function count_all() {
6 $this->db->from($this->table);
3 return $this->db->count_all_results();
7 }
3 }
8
3
9
4
0
4
1
4
2
4
3
4
4
4
5
4
6
4
7
4
8
4
9
5
0
5
1
5
2
5
3
5
4
5
5
5
6
5
7
5
8
5
9
6
0
6
1
6
2
6
3
6
4

Create View Files In View Folder : header.php, footer.php & datatable.php

header.php

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>CI-CodeWife</title>
5
6 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-
7 awesome.min.css" rel="stylesheet">
8 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-
9 awesome.min.css" rel="stylesheet">
10 <link href="https://cdnjs.cloudflare.com/ajax/libs/weather-
11 icons/2.0.9/css/weather-icons.css" rel="stylesheet">
12 <link href="https://cdn.jsdelivr.net/themify-icons/0.1.2/css/themify-icons.css"
13 rel="stylesheet">
14 <link media='all' href="<?php echo base_url();
15 ?>assets/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
16 <link href="<?php echo base_url(); ?>assets/plugins/bower_components/bootstrap-
17 extension/css/bootstrap-extension.css" rel="stylesheet">
18
19 <!-- Menu CSS -->
20 <link href="<?php echo base_url(); ?>assets/plugins/bower_components/sidebar-
21 nav/dist/sidebar-nav.min.css" rel="stylesheet">
22
23 <!-- Custom CSS -->
24 <link media='all' href="<?php echo base_url(); ?>assets/css/style.css"
25 rel="stylesheet">
26 <!-- color CSS -->
27 <link href="<?php echo base_url(); ?>assets/css/colors/default.css" id="theme"
28 rel="stylesheet">
29 <script>
30 var _base_url = "<?php echo base_url(); ?>";
31 </script>
32
33
34 <link href='<?php echo base_url();
35 ?>assets/plugins/bower_components/bootstrap-daterangepicker/daterangepicker.css'
36 rel='stylesheet'>
37 <link href='<?php echo base_url();
38 ?>assets/daterangepicker/daterangepicker.css' rel='stylesheet'>
39 <link href='<?php echo base_url();
40 ?>assets/plugins/bower_components/bootstrap-daterangepicker/daterangepicker.css'
41 rel='stylesheet'>
42 <link href='<?php echo base_url();
43 ?>assets/plugins/bower_components/datatables/jquery.dataTables.min.css'
44 rel='stylesheet'>
<link href='<?php echo base_url();
?>assets/datatable/buttons/1.2.2/css/buttons.dataTables.min.css' rel='stylesheet'>

</head>
<body>
<!-- sticky footer here using this answer
http://stackoverflow.com/a/14595609/1771306
-->
<div id="wrap">

<div class="container-fluid">

<div class="row">
<div class="col-md-10">
<div class="container-fluid">
<!-- Content Block -->

footer.php

1
2 </div>
3 </div> <!-- Ends content block -->
4 </div> <!-- End content row -->
5
6 </div> <!-- Ends container-fluid div -->
7 <div id="push"></div>
8 </div> <!-- Ends the wrap div -->
9
10 <div id="footer">
11 <div class="container-fluid">
12 <div class="row">
13 <div class="col-md-12">
14 <div class="center-block text-
15 center">Copyright (c) 2017 Codewife.com</div>
16 </div>
17 </div>
18
19 </div>
20 </div>
21
22
23 <script src="<?php echo base_url();
24 ?>assets/plugins/bower_components/jquery/dist/jquery.min.js"></script>
25 <!-- Bootstrap Core JavaScript -->
26
27 <script src="<?php echo base_url();
28 ?>assets/bootstrap/dist/js/tether.min.js"></script>
29 <script src="<?php echo base_url();
30 ?>assets/bootstrap/dist/js/bootstrap.min.js"></script>
31 <!--<script src="assets/plugins/bower_components/bootstrap-extension/js/bootstrap-
32 extension.min.js"></script>-->
33
34 <!-- Menu Plugin JavaScript -->
35 <script src="<?php echo base_url(); ?>assets/plugins/bower_components/sidebar-
36 nav/dist/sidebar-nav.min.js"></script>
37
38 <script src='<?php echo base_url();
39 ?>assets/daterangepicker/moment.js'></script>
40 <script src='<?php echo base_url();
41 ?>assets/daterangepicker/daterangepicker.js'></script>
42 <script src='<?php echo base_url();
43 ?>assets/plugins/bower_components/datatables/jquery.dataTables.min.js'></script>
44
45 <script
46 src='http://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js'></script>
47 <script
48 src='http://cdn.datatables.net/buttons/1.2.2/js/buttons.flash.min.js'></script>
49 <script
50 src='http://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js'></script>
51 <script
52 src='http://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js'></script>
53 <script
54 src='http://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js'></script>
55 <script
56 src='http://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js'></script>
57 <script
58 src='http://cdn.datatables.net/buttons/1.2.2/js/buttons.print.min.js'></script>
59
60 <script>
61 $(document).ready(function(){
62 var start = moment().subtract(15, 'year');
63 var end = moment();
64 var min = '';
65 var max = '';
66
67
68 var table1 = $('#allsales').DataTable({
69 "footerCallback": function (row, data, start, end, display) {
70 var api = this.api(),
71 data;
72
73 // Remove the formatting to get integer data for summation
74 var intVal = function (i) {
75 return typeof i === 'string' ?
76 i.replace(/[\$,]/g, '') * 1 :
77 typeof i === 'number' ?
78 i : 0;
79 };
80
81 // Total over all pages
82 taxable = api
83 .column(4)
84 .data()
85 .reduce(function (a, b) {
86 return intVal(a) + intVal(b);
87 }, 0);
88
89 // Update footer
90 $(api.column(4).footer()).html(
91 '<i class="fa fa-inr"></i> ' +
92 taxable.toFixed(2).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,")
93 );
94
95
 96 },
97 "processing": true, //Feature control the processing indicator.
98
99 "serverSide": true, //Feature control DataTables' server-side processing mode.
100 "order": [], //Initial no order.
101
102 // Load data for the table's content from an Ajax source
103 "ajax": {
104 "data": function (d) {
105 d.minDate = min;
106 d.maxDate = max;
107 },
108 "url": "" + _base_url + "datatablecontrol/ajax_list",
109 "type": "POST"
110 //"success":function(d)
111 //{
112 // console.log(d);
113 //}
114
115 },
116 dom: 'Bfrtip',
117 buttons: [
118 'copy', 'csv', 'excel','pdf','print'],
119 //Set column definition initialisation properties.
120 "columnDefs": [{
121 "targets": [0], //first column / numbering column
122 "orderable": false, //set not orderable
123 }, ],
124
125 });
126
127 function cb(start, end) {
128 min = start.format('Y-MM-DD');
129 max = end.format('Y-MM-DD');
130 $('#reportrange span').html(start.format('D/MMM/Y') + ' - ' +
131 end.format('D/MMM/Y'));
132 table1.ajax.reload();
133
134 }
135
136 $('#reportrange').daterangepicker({
137 startDate: start,
138 endDate: end,
opens: "right",
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')],
'This Year' :
[moment().month('january').startOf('month'),moment().month('December').endOf('month')]
}
}, cb);

cb(start, end);

});
</script>
</body>
</html>

datatable.php

1 <div class="page-header">
2 <h2>CI-Codewife DataTables Library Example</h2>
3 </div>
4 <div class="row">
5
6 <div class="col-md-4">
7 <div class="panel panel-default">
8 <div class="panel-body">
 9 <div id="reportrange" class="pull-right" style="background:
10 #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
11 <i class="glyphicon glyphicon-calendar fa fa-
12 calendar"></i>&nbsp;
13 <span></span> <i class="fa fa-angle-down pull-
14 right"></i>
15 </div>
16 </div>
17 </div>
18
19
20 </div>
21 <div class="col-md-4"></div>
22 <div class="col-md-4"></div>
23 </div>
24 <div class="row">
25 <div class="col-md-12">
26 <div class="panel panel-default">
27 <div class="panel-body">
28 <table id="allsales" class="display nowrap" cellspacing="0"
29 width="100%">
30 <thead>
31 <tr>
32 <th>#</th>
33 <th>Number</th>
34 <th>Name</th>
35 <th>Date</th>
36 <th>Amount</th>
37
38 </tr>
39 </thead>
40 <tfoot>
41 <tr>
42 <th>-</th>
43 <th>Total</th>
44 <th>-</th>
45 <th>-</th>
46 <th>-</th>
47
48 </tr>
49 </tfoot>
50 </table>
</div>
</div>
</div>
</div>

CodeWife