diff --git a/src/Controller/JobOrderController.php b/src/Controller/JobOrderController.php
index 09269aa5..f7818a98 100644
--- a/src/Controller/JobOrderController.php
+++ b/src/Controller/JobOrderController.php
@@ -198,6 +198,7 @@ class JobOrderController extends Controller
 
         $template = $jo_handler->getTwigTemplate('jo_list_fulfillment');
 
+        $params = $jo_handler->getOtherParameters();
         $params['table_refresh_rate'] = $this->container->getParameter('job_order_refresh_interval');
 
         return $this->render($template, $params);
@@ -212,6 +213,7 @@ class JobOrderController extends Controller
 
         $template = $jo_handler->getTwigTemplate('jo_list_open');
 
+        $params = $jo_handler->getOtherParameters();
         $params['table_refresh_rate'] = $this->container->getParameter('job_order_refresh_interval');
         $params['statuses'] = JOStatus::getCollection();
 
@@ -227,6 +229,7 @@ class JobOrderController extends Controller
 
         $template = $jo_handler->getTwigTemplate('jo_list_all');
 
+        $params = $jo_handler->getOtherParameters();
         $params['table_refresh_rate'] = $this->container->getParameter('job_order_refresh_interval');
 
         return $this->render($template, $params);
diff --git a/src/Service/JobOrderHandler/CMBJobOrderHandler.php b/src/Service/JobOrderHandler/CMBJobOrderHandler.php
index 50c504fc..c43a25d6 100644
--- a/src/Service/JobOrderHandler/CMBJobOrderHandler.php
+++ b/src/Service/JobOrderHandler/CMBJobOrderHandler.php
@@ -2197,6 +2197,14 @@ class CMBJobOrderHandler implements JobOrderHandlerInterface
         return null;
     }
 
+    public function getOtherParameters()
+    {
+        // get riders for dropdown
+        $params['riders'] = $this->em->getRepository(Rider::class)->findAll();
+
+        return $params;
+    }
+
 
     protected function fillDropdownParameters(&$params)
     {
@@ -2435,7 +2443,36 @@ class CMBJobOrderHandler implements JobOrderHandlerInterface
         switch ($tier)
         {
             case 'fulfill':
-                $query->where('q.status IN (:statuses)')
+                if (isset($datatable['query']['data-rows-search']))
+                {
+                    $query->innerJoin('q.cus_vehicle', 'cv')
+                        ->innerJoin('q.customer', 'c')
+                        ->where('cv.plate_number like :filter')
+                        ->orWhere('c.phone_mobile like :filter')
+                        ->orWhere('c.first_name like :filter or c.last_name like :filter')
+                        ->setParameter('filter', $datatable['query']['data-rows-search'] . '%');
+                }
+                if (isset($datatable['query']['rider']))
+                {
+                    $query->innerJoin('q.rider', 'r')
+                        ->andWhere('r.id = :rider_id')
+                        ->setParameter('rider_id', $datatable['query']['rider']);
+                }
+                if (isset($datatable['query']['schedule_date']))
+                {
+                    $start = $datatable['query']['schedule_date'][0] . ' ' . '00:00:00';
+                    $end = $datatable['query']['schedule_date'][1] . ' ' . '23:59:00';
+
+                    $date_start = DateTime::createFromFormat('m/d/Y H:i:s', $start);
+                    $date_end = DateTime::createFromFormat('m/d/Y H:i:s', $end);
+
+                    $query->andWhere('q.date_schedule >= :date_start')
+                        ->andWhere('q.date_schedule <= :date_end')
+                        ->setParameter('date_start', $date_start)
+                        ->setParameter('date_end', $date_end);
+                }
+
+                $query->andWhere('q.status IN (:statuses)')
                     ->andWhere('q.hub IN (:hubs)')
                     ->setParameter('statuses', $status, Connection::PARAM_STR_ARRAY)
                     ->setParameter('hubs', $hubs, Connection::PARAM_STR_ARRAY);
@@ -2461,6 +2498,25 @@ class CMBJobOrderHandler implements JobOrderHandlerInterface
                     $query->where('q.status IN (:statuses)')
                         ->setParameter('statuses', $status, Connection::PARAM_STR_ARRAY);
                 }
+                if (isset($datatable['query']['rider']))
+                {
+                    $query->innerJoin('q.rider', 'r')
+                        ->andWhere('r.id = :rider_id')
+                        ->setParameter('rider_id', $datatable['query']['rider']);
+                }
+                if (isset($datatable['query']['schedule_date']))
+                {
+                    $start = $datatable['query']['schedule_date'][0] . ' ' . '00:00:00';
+                    $end = $datatable['query']['schedule_date'][1] . ' ' . '23:59:00';
+
+                    $date_start = DateTime::createFromFormat('m/d/Y H:i:s', $start);
+                    $date_end = DateTime::createFromFormat('m/d/Y H:i:s', $end);
+
+                    $query->andWhere('q.date_schedule >= :date_start')
+                        ->andWhere('q.date_schedule <= :date_end')
+                        ->setParameter('date_start', $date_start)
+                        ->setParameter('date_end', $date_end);
+                }
                 break;
             case 'all':
                 if (isset($datatable['query']['data-rows-search']))
@@ -2472,6 +2528,25 @@ class CMBJobOrderHandler implements JobOrderHandlerInterface
                         ->orWhere('c.first_name like :filter or c.last_name like :filter')
                         ->setParameter('filter', $datatable['query']['data-rows-search'] . '%');
                 }
+                if (isset($datatable['query']['rider']))
+                {
+                    $query->innerJoin('q.rider', 'r')
+                        ->andWhere('r.id = :rider_id')
+                        ->setParameter('rider_id', $datatable['query']['rider']);
+                }
+                if (isset($datatable['query']['schedule_date']))
+                {
+                    $start = $datatable['query']['schedule_date'][0] . ' ' . '00:00:00';
+                    $end = $datatable['query']['schedule_date'][1] . ' ' . '23:59:00';
+
+                    $date_start = DateTime::createFromFormat('m/d/Y H:i:s', $start);
+                    $date_end = DateTime::createFromFormat('m/d/Y H:i:s', $end);
+
+                    $query->andWhere('q.date_schedule >= :date_start')
+                        ->andWhere('q.date_schedule <= :date_end')
+                        ->setParameter('date_start', $date_start)
+                        ->setParameter('date_end', $date_end);
+                }
                 break;
             default:
                 $query->where('q.status = :status')
diff --git a/templates/job-order/list.all.html.twig b/templates/job-order/list.all.html.twig
index a4cd4afe..95e1732e 100644
--- a/templates/job-order/list.all.html.twig
+++ b/templates/job-order/list.all.html.twig
@@ -19,21 +19,45 @@
             	<div class="m-portlet m-portlet--mobile">
                     <div class="m-portlet__body">
                     	<div class="m-form m-form--label-align-right m--margin-top-20 m--margin-bottom-30">
-							<div class="row align-items-center">
-								<div class="col-xl-12">
-									<div class="form-group m-form__group row align-items-center">
-										<div class="col-md-4">
-											<div class="m-input-icon m-input-icon--left">
-												<input type="text" class="form-control m-input m-input--solid" placeholder="Search..." id="data-rows-search">
-												<span class="m-input-icon__icon m-input-icon__icon--left">
-													<span><i class="la la-search"></i></span>
-												</span>
-											</div>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
+                            <div class="row align-items-center">
+                                <div class="col-xl-12">
+                                    <div class="form-group m-form__group row align-items-center">
+                                        <div class="col-md-4">
+                                            <div class="m-input-icon m-input-icon--left">
+                                                <input type="text" class="form-control m-input m-input--solid" placeholder="Search..." id="data-rows-search">
+                                                <span class="m-input-icon__icon m-input-icon__icon--left">
+                                                    <span><i class="la la-search"></i></span>
+                                                </span>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-4">
+                                            <div class="m-input-icon m-input-icon--left">
+                                                <div class="input-group">
+                                                    <label>Rider:</label>
+                                                    <select class="form-control m-input" id="rider_list" name="rider_list">
+                                                        <option value=""></option>
+                                                        {% for rider in riders %}
+                                                            <option value="{{ rider.getID }}">{{ rider.getFirstName ~ ' ' ~ rider.getLastName }} </option>
+                                                        {% endfor %}
+                                                    </select>
+                                                </div> 
+                                            </div>
+                                        </div>
+                                        <div class="col-md-4">
+                                            <div class="m-input-icon m-input-icon--left">
+                                                <div class="input-daterange input-group" id="date-range">
+                                                    <input role="presentation" type="text" class="form-control m-input" id="date_start" name="date_start" placeholder="Start date" />
+                                                    <div class="input-group-append">
+                                                        <span class="input-group-text"><i class="la la-ellipsis-h"></i></span>
+                                                    </div>
+                                                    <input role="presentation" type="text" class="form-control" id="date_end" name="date_end" placeholder="End date" /> 
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
                         <!--begin: Datatable -->
                         <div id="data-rows"></div>
                         <!--end: Datatable -->
@@ -45,93 +69,119 @@
 {% endblock %}
 
 {% block scripts %}
-	<script>
-		$(function() {
-			var options = {
-				data: {
-					type: 'remote',
-					source: {
-						read: {
-							url: '{{ url('jo_all_rows') }}',
-							method: 'POST'
-						}
-					},
-					saveState: {
-			            cookie: false,
-			            webstorage: false
-			        },
-					pageSize: 10,
-					serverPaging: true,
-					serverFiltering: true,
-					serverSorting: true
-				},
-				rows: {
-					beforeTemplate: function (row, data, index) {
-						if (data.flag_advance) {
-							$(row).addClass('m-table__row--danger');
-						}
-					}
-				},
-				columns: [
-					{
-						field: 'id',
-						title: 'JO Number'
-					},
-                    {
-                        field: 'plate_number',
-                        title: 'Plate #'
+    <script>
+        $(function() {
+            $("#date-range").datepicker({
+                orientation: "bottom"
+            });
+
+            var options = {
+                data: {
+                    type: 'remote',
+                    source: {
+                        read: {
+                            url: '{{ url('jo_all_rows') }}',
+                            method: 'POST'
+                        }
                     },
-                    {
-                        field: 'customer_name',
-                        title: 'Customer'
-                    },
-					{
-						field: 'delivery_address',
-						title: 'Customer Area'
-					},
-                    {
-                        field: 'type',
-                        title: 'Schedule'
-                    },
-					{
-						field: 'date_schedule',
-						title: 'Scheduled Date'
-					},
-					{
-						field: 'status',
-						title: 'Status'
-					},
-					{
-						field: 'processor',
-						title: 'Dispatcher'
-					},
-					{
-						field: 'Actions',
-						width: 110,
-						title: 'Actions',
-						sortable: false,
-						overflow: 'visible',
-						template: function (row, index, datatable) {
-							var actions = '<a href="' + row.meta.update_url + '" class="m-portlet__nav-link btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill btn-edit" title="View"><i class="la la-edit"></i></a>';
-							actions += '<a href="' + row.meta.pdf_url + '" class="m-portlet__nav-link btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill btn-edit" title="PDF" target="_blank"><i class="la la-file-o"></i></a>';
+                    saveState: {
+                        cookie: false,
+                        webstorage: false
+	            },
+                    pageSize: 10,
+                    serverPaging: true,
+                    serverFiltering: true,
+                    serverSorting: true
+                },
+                rows: {
+                    beforeTemplate: function (row, data, index) {
+                        if (data.flag_advance) {
+                            $(row).addClass('m-table__row--danger');
+                        }
+                    }
+                },
+                columns: [
+                {
+                    field: 'id',
+                    title: 'JO Number'
+                },
+                {
+                    field: 'plate_number',
+                    title: 'Plate #'
+                },
+                {
+                    field: 'customer_name',
+                    title: 'Customer'
+                },
+                {
+                    field: 'delivery_address',
+                    title: 'Customer Area'
+                },
+                {
+                    field: 'type',
+                    title: 'Schedule'
+                },
+                {
+                    field: 'date_schedule',
+                    title: 'Scheduled Date'
+                },
+                {
+                    field: 'status',
+                    title: 'Status'
+                },
+                {
+                    field: 'processor',
+                    title: 'Dispatcher'
+                },
+                {
+                    field: 'Actions',
+                    width: 110,
+                    title: 'Actions',
+                    sortable: false,
+                    overflow: 'visible',
+                    template: function (row, index, datatable) {
+                        var actions = '<a href="' + row.meta.update_url + '" class="m-portlet__nav-link btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill btn-edit" title="View"><i class="la la-edit"></i></a>';
+                        actions += '<a href="' + row.meta.pdf_url + '" class="m-portlet__nav-link btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill btn-edit" title="PDF" target="_blank"><i class="la la-file-o"></i></a>';
 							
-							return actions;
-						},
-					}
-				],
-				search: {
-					onEnter: false,
-					input: $('#data-rows-search'),
-					delay: 400
-				}
-			};
+                        return actions;
+                    },
+                }
+                ],
+                search: {
+                    onEnter: false,
+                    input: $('#data-rows-search'),
+                    delay: 400
+                }
+            };
 
-			var table = $("#data-rows").mDatatable(options);
+            var table = $("#data-rows").mDatatable(options);
 
-			// auto refresh table
-			setInterval(function() {
-				table.reload();
-			}, {{ table_refresh_rate }});
-		});
-	</script>
+            // auto refresh table
+            setInterval(function() {
+                table.reload();
+            }, {{ table_refresh_rate }});
+
+            $("#rider_list").on("change", function() {
+                table.search($(this).val(), "rider");
+            });
+
+            $("#date_start").on("change", function() {
+                var date_start = $(this).val();
+                var date_end = $("[name='date_end']").val();
+                var date_array = [date_start, date_end];
+
+                table.search(date_array, "schedule_date");
+            });
+
+            $("#date_end").on("change", function() {
+                console.log($(this).val());
+
+                var date_end = $(this).val();
+                var date_start = $("[name='date_start']").val();
+                var date_array = [date_start, date_end];
+
+                table.search(date_array, "schedule_date");
+            });
+        });
+    </script>
 {% endblock %}
diff --git a/templates/job-order/list.fulfillment.html.twig b/templates/job-order/list.fulfillment.html.twig
index 46210a9d..e28512c7 100644
--- a/templates/job-order/list.fulfillment.html.twig
+++ b/templates/job-order/list.fulfillment.html.twig
@@ -19,21 +19,45 @@
             	<div class="m-portlet m-portlet--mobile">
                     <div class="m-portlet__body">
                     	<div class="m-form m-form--label-align-right m--margin-top-20 m--margin-bottom-30">
-							<div class="row align-items-center">
-								<div class="col-xl-12">
-									<div class="form-group m-form__group row align-items-center">
-										<div class="col-md-4">
-											<div class="m-input-icon m-input-icon--left">
-												<input type="text" class="form-control m-input m-input--solid" placeholder="Search..." id="data-rows-search">
-												<span class="m-input-icon__icon m-input-icon__icon--left">
-													<span><i class="la la-search"></i></span>
-												</span>
-											</div>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
+                        <div class="row align-items-center">
+                                <div class="col-xl-12">
+                                    <div class="form-group m-form__group row align-items-center">
+                                        <div class="col-md-4">
+                                            <div class="m-input-icon m-input-icon--left">
+                                                <input type="text" class="form-control m-input m-input--solid" placeholder="Search..." id="data-rows-search">
+                                                <span class="m-input-icon__icon m-input-icon__icon--left">
+                                                    <span><i class="la la-search"></i></span>
+                                                </span>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-4">
+                                            <div class="m-input-icon m-input-icon--left">
+                                                <div>
+                                                    <label>Rider:</label>
+                                                    <select class="form-control m-input" id="rider_list" name="rider_list">
+                                                        <option value=""></option>
+                                                        {% for rider in riders %}
+                                                            <option value="{{ rider.getID }}">{{ rider.getFirstName ~ ' ' ~ rider.getLastName }} </option>
+                                                        {% endfor %}
+                                                    </select>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-4">
+                                            <div class="m-input-icon m-input-icon--left">
+                                                <div class="input-daterange input-group" id="date-range">
+                                                    <input role="presentation" type="text" class="form-control m-input" id="date_start" name="date_start" placeholder="Start date" />
+                                                    <div class="input-group-append">
+                                                        <span class="input-group-text"><i class="la la-ellipsis-h"></i></span>
+                                                    </div>
+                                                    <input role="presentation" type="text" class="form-control" id="date_end" name="date_end" placeholder="End date" />
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
                         <!--begin: Datatable -->
                         <div id="data-rows"></div>
                         <!--end: Datatable -->
@@ -45,88 +69,116 @@
 {% endblock %}
 
 {% block scripts %}
-	<script>
-		$(function() {
-			var options = {
-				data: {
-					type: 'remote',
-					source: {
-						read: {
-							url: '{{ url('jo_fulfill_rows') }}',
-							method: 'POST'
-						}
-					},
-					saveState: {
-			            cookie: false,
-			            webstorage: false
-			        },
-					pageSize: 10,
-					serverPaging: true,
-					serverFiltering: true,
-					serverSorting: true
-				},
-				rows: {
-					beforeTemplate: function (row, data, index) {
-						if (data.flag_advance) {
-							$(row).addClass('m-table__row--danger');
-						}
-					}
-				},
-				columns: [
-					{
-						field: 'id',
-						title: 'JO Number'
-					},
-					{
-						field: 'delivery_address',
-						title: 'Customer Area'
-					},
-					{
-						field: 'service_type',
-						title: 'Type of Transaction'
-					},
-                    {
-                        field: 'type',
-                        title: 'Schedule'
+    <script>
+        $(function() {
+            $("#date-range").datepicker({
+                orientation: "bottom"
+            });
+
+            var options = {
+                data: {
+                    type: 'remote',
+                    source: {
+                        read: {
+                            url: '{{ url('jo_fulfill_rows') }}',
+                            method: 'POST'
+                        }
                     },
-					{
-						field: 'date_schedule',
-						title: 'Scheduled Date'
-					},
-					{
-						field: 'status',
-						title: 'Status'
-					},
-					{
-						field: 'processor',
-						title: 'Dispatcher'
-					},
-					{
-						field: 'Actions',
-						width: 110,
-						title: 'Actions',
-						sortable: false,
-						overflow: 'visible',
-						template: function (row, index, datatable) {
-							var actions = '<a href="' + row.meta.update_url + '" class="m-portlet__nav-link btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill btn-edit" title="View / Edit"><i class="la la-edit"></i></a>' + '<a href="' + row.meta.onestep_edit_url + '" class="m-portlet__nav-link btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill btn-edit" title="One Step Edit"><i class="la la-edit"></i></a>';
+                    saveState: {
+                        cookie: false,
+                        webstorage: false
+                    },
+                    pageSize: 10,
+                    serverPaging: true,
+                    serverFiltering: true,
+                    serverSorting: true
+                },
+                rows: {
+                    beforeTemplate: function (row, data, index) {
+                        if (data.flag_advance) {
+                            $(row).addClass('m-table__row--danger');
+                        }
+                    }
+                },
+                columns: [
+                {
+                    field: 'id',
+                    title: 'JO Number'
+                },
+                {
+                    field: 'delivery_address',
+                    title: 'Customer Area'
+                },
+                {
+                    field: 'service_type',
+                    title: 'Type of Transaction'
+                },
+                {
+                    field: 'type',
+                    title: 'Schedule'
+                },
+                {
+                    field: 'date_schedule',
+                    title: 'Scheduled Date'
+                },
+                {
+                    field: 'status',
+                    title: 'Status'
+                },
+                {
+                   field: 'processor',
+                   title: 'Dispatcher'
+                },
+                {
+                    field: 'Actions',
+                    width: 110,
+                    title: 'Actions',
+                    sortable: false,
+                    overflow: 'visible',
+                    template: function (row, index, datatable) {
+                        var actions = '<a href="' + row.meta.update_url + '" class="m-portlet__nav-link btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill btn-edit" title="View / Edit"><i class="la la-edit"></i></a>' + '<a href="' + row.meta.onestep_edit_url + '" class="m-portlet__nav-link btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill btn-edit" title="One Step Edit"><i class="la la-edit"></i></a>';
 							
-							return actions;
-						},
-					}
-				],
-				search: {
-					onEnter: false,
-					input: $('#data-rows-search'),
-					delay: 400
-				}
-			};
+                        return actions;
+                    },
+                }
+                ],
+                search: {
+                    onEnter: false,
+                    input: $('#data-rows-search'),
+                    delay: 400
+                }
+            };
 
-			var table = $("#data-rows").mDatatable(options);
+            var table = $("#data-rows").mDatatable(options);
 
-			// auto refresh table
-			setInterval(function() {
-				table.reload();
-			}, {{ table_refresh_rate }});
-		});
-	</script>
+            // auto refresh table
+            setInterval(function() {
+                table.reload();
+            }, {{ table_refresh_rate }});
+
+
+            $("#rider_list").on("change", function() {
+                console.log($(this).val());
+                table.search($(this).val(), "rider");
+            });
+
+            $("#date_start").on("change", function() {
+                var date_start = $(this).val();
+                var date_end = $("[name='date_end']").val();
+                var date_array = [date_start, date_end];
+
+                table.search(date_array, "schedule_date");
+            });
+
+            $("#date_end").on("change", function() {
+                console.log($(this).val());
+
+                var date_end = $(this).val();
+                var date_start = $("[name='date_start']").val();
+                var date_array = [date_start, date_end];
+
+                table.search(date_array, "schedule_date");
+            });
+        });
+    </script>
 {% endblock %}
diff --git a/templates/job-order/list.open.html.twig b/templates/job-order/list.open.html.twig
index 62af1e3a..2cae9007 100644
--- a/templates/job-order/list.open.html.twig
+++ b/templates/job-order/list.open.html.twig
@@ -19,21 +19,45 @@
             	<div class="m-portlet m-portlet--mobile">
                     <div class="m-portlet__body">
                     	<div class="m-form m-form--label-align-right m--margin-top-20 m--margin-bottom-30">
-							<div class="row align-items-center">
-								<div class="col-xl-12">
-									<div class="form-group m-form__group row align-items-center">
-										<div class="col-md-4">
-											<div class="m-input-icon m-input-icon--left">
-												<input type="text" class="form-control m-input m-input--solid" placeholder="Search..." id="data-rows-search">
-												<span class="m-input-icon__icon m-input-icon__icon--left">
-													<span><i class="la la-search"></i></span>
-												</span>
-											</div>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
+                            <div class="row align-items-center">
+                                <div class="col-xl-12">
+                                    <div class="form-group m-form__group row align-items-center">
+                                        <div class="col-md-4">
+                                            <div class="m-input-icon m-input-icon--left">
+                                                <input type="text" class="form-control m-input m-input--solid" placeholder="Search..." id="data-rows-search">
+                                                <span class="m-input-icon__icon m-input-icon__icon--left">
+                                                    <span><i class="la la-search"></i></span>
+                                                </span>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-4">
+                                            <div class="m-input-icon m-input-icon--left">
+                                                <div>
+                                                    <label>Rider:</label>
+                                                    <select class="form-control m-input" id="rider_list" name="rider_list">
+                                                        <option value=""></option>
+                                                        {% for rider in riders %}
+                                                            <option value="{{ rider.getID }}">{{ rider.getFirstName ~ ' ' ~ rider.getLastName }} </option>
+                                                        {% endfor %}
+                                                    </select>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-4">
+                                            <div class="m-input-icon m-input-icon--left">
+                                                <div class="input-daterange input-group" id="date-range">
+                                                    <input role="presentation" type="text" class="form-control m-input" id="date_start" name="date_start" placeholder="Start date" />
+                                                    <div class="input-group-append">
+                                                        <span class="input-group-text"><i class="la la-ellipsis-h"></i></span>
+                                                    </div>
+                                                    <input role="presentation" type="text" class="form-control" id="date_end" name="date_end" placeholder="End date" />
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
                         <!--begin: Datatable -->
                         <div id="data-rows"></div>
                         <!--end: Datatable -->
@@ -45,104 +69,129 @@
 {% endblock %}
 
 {% block scripts %}
-	<script>
-		$(function() {
-			var options = {
-				data: {
-					type: 'remote',
-					source: {
-						read: {
-							url: '{{ url('jo_open_rows') }}',
-							method: 'POST'
-						}
-					},
-					saveState: {
-			            cookie: false,
-			            webstorage: false
-			        },
-					pageSize: 10,
-					serverPaging: true,
-					serverFiltering: true,
-					serverSorting: true
-				},
-				rows: {
-					beforeTemplate: function (row, data, index) {
-						if (data.flag_advance) {
-							$(row).addClass('m-table__row--danger');
-						}
+    <script>
+        $(function() {
+            $("#date-range").datepicker({
+                orientation: "bottom"
+            });
+            var options = {
+                data: {
+                    type: 'remote',
+                    source: {
+                        read: {
+                            url: '{{ url('jo_open_rows') }}',
+                            method: 'POST'
+                        }
+                    },
+                    saveState: {
+                        cookie: false,
+                        webstorage: false
+                    },
+                    pageSize: 10,
+                    serverPaging: true,
+                    serverFiltering: true,
+                    serverSorting: true
+                },
+                rows: {
+                    beforeTemplate: function (row, data, index) {
+                        if (data.flag_advance) {
+                            $(row).addClass('m-table__row--danger');
+                        }
 
                         if (data.is_mobile) {
                             $(row).addClass('m-table__row--is_mobile');
                         }
-					}
-				},
-				columns: [
-					{
-						field: 'id',
-						title: 'JO #'
-					},
-					{
-						field: 'plate_number',
-						title: 'Plate #'
-					},
-                    {
-                        field: 'customer_name',
-                        title: 'Customer'
-                    },
-					{
-						field: 'delivery_address',
-						title: 'Area'
-					},
-                    {
-                        field: 'type',
-                        title: 'Schedule'
-                    },
-					{
-						field: 'date_schedule',
-						title: 'Scheduled Date'
-					},
-					{
-						field: 'status',
-						title: 'Status'
-					},
-					{
-						field: 'processor',
-						title: 'Dispatcher'
-					},
-					{
-						field: 'Actions',
-						width: 110,
-						title: 'Actions',
-						sortable: false,
-						overflow: 'visible',
-						template: function (row, index, datatable) {
-							var actions = '<a href="' + row.meta.reassign_hub_url + '" class="m-portlet__nav-link btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill btn-reassign-hub" title="Re-assign Hub"><i class="fa fa-home"></i></a>' +
+                    }
+                },
+                columns: [
+                {
+                    field: 'id',
+                    title: 'JO #'
+                },
+                {
+                    field: 'plate_number',
+                    title: 'Plate #'
+                },
+                {
+                    field: 'customer_name',
+                    title: 'Customer'
+                },
+                {
+                    field: 'delivery_address',
+                    title: 'Area'
+                },
+                {
+                    field: 'type',
+                    title: 'Schedule'
+                },
+                {
+                    field: 'date_schedule',
+                    title: 'Scheduled Date'
+                },
+                {
+                    field: 'status',
+                    title: 'Status'
+                },
+                {
+                    field: 'processor',
+                    title: 'Dispatcher'
+                },
+                {
+                    field: 'Actions',
+                    width: 110,
+                    title: 'Actions',
+                    sortable: false,
+                    overflow: 'visible',
+                    template: function (row, index, datatable) {
+                        var actions = '<a href="' + row.meta.reassign_hub_url + '" class="m-portlet__nav-link btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill btn-reassign-hub" title="Re-assign Hub"><i class="fa fa-home"></i></a>' +
                             (row.status != '{{ statuses["pending"] }}' ? '<a href="' + row.meta.reassign_rider_url + '" class="m-portlet__nav-link btn m-btn m-btn--hover-focus m-btn--icon m-btn--icon-only m-btn--pill btn-reassign-rider" title="Re-assign Rider"><i class="fa fa-truck"></i></a>' : '');
 
-                            {% if is_granted('jo_open.edit') %}
-							actions += '<a href="' + row.meta.edit_url + '" class="m-portlet__nav-link btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill btn-reassign-hub" title="Edit"><i class="fa fa-file"></i></a>';
-                            {% endif %}
-                            {% if is_granted('jo_onestep.edit') %}
-                                                        actions += '<a href="' + row.meta.onestep_edit_url + '" class="m-portlet__nav-link btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill btn-reassign-hub" title="One Step Edit"><i class="fa fa-file"></i></a>';
-                            {% endif %}
+                        {% if is_granted('jo_open.edit') %}
+                            actions += '<a href="' + row.meta.edit_url + '" class="m-portlet__nav-link btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill btn-reassign-hub" title="Edit"><i class="fa fa-file"></i></a>';
+                        {% endif %}
+                        {% if is_granted('jo_onestep.edit') %}
+                            actions += '<a href="' + row.meta.onestep_edit_url + '" class="m-portlet__nav-link btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill btn-reassign-hub" title="One Step Edit"><i class="fa fa-file"></i></a>';
+                        {% endif %}
 							
-							return actions;
-						},
-					}
-				],
-				search: {
-					onEnter: false,
-					input: $('#data-rows-search'),
-					delay: 400
-				}
-			};
+                        return actions;
+                    },
+                }
+                ],
+                search: {
+                    onEnter: false,
+                    input: $('#data-rows-search'),
+                    delay: 400
+                }
+            };
 
-			var table = $("#data-rows").mDatatable(options);
+            var table = $("#data-rows").mDatatable(options);
 
-			// auto refresh table
-			setInterval(function() {
-				table.reload();
-			}, {{ table_refresh_rate }});
-		});
-	</script>
+            // auto refresh table
+            setInterval(function() {
+                table.reload();
+            }, {{ table_refresh_rate }});
+
+            $("#rider_list").on("change", function() {
+                table.search($(this).val(), "rider");
+            });
+
+            $("#date_start").on("change", function() {
+                var date_start = $(this).val();
+                var date_end = $("[name='date_end']").val();
+                var date_array = [date_start, date_end];
+
+                table.search(date_array, "schedule_date");
+            });
+
+            $("#date_end").on("change", function() {
+                console.log($(this).val());
+
+                var date_end = $(this).val();
+                var date_start = $("[name='date_start']").val();
+                var date_array = [date_start, date_end];
+
+                table.search(date_array, "schedule_date");
+            });
+        });
+    </script>
 {% endblock %}