DateRange filter in requisition : GWM

app/Views/requisitionlisting.php

@@ -11,71 +11,71 @@
 	}
 	//echo $ReqNo;
 }?>
-	<style>
+<style>
-	#Requisition_filter{
+#Requisition_filter {
     float: inline-end;
-	}	
+}
-	#Requisition_wrapper .row  .col-sm-4{ 
+
+#Requisition_wrapper .row .col-sm-4 {
     flex-basis: 50%;
     float: inline-end;
-	}
+}
-	#Requisition_paginate .pagination { 
+
+#Requisition_paginate .pagination {
     flex-basis: 50%;
     float: inline-end;
-		margin:0 0 15px;
+    margin: 0 0 15px;
-	}
+}
-	#Requisition_wrapper .row:nth-child(3), #Requisition_wrapper .row:nth-child(1){
+
+#Requisition_wrapper .row:nth-child(3),
+#Requisition_wrapper .row:nth-child(1) {
     padding: 0 15px;
-	}
+}
-	#Requisition_info{
+
+#Requisition_info {
     margin-top: 5px;
-	}
+}
-	.dataTables_wrapper{
+
+.dataTables_wrapper {
     padding-bottom: 0;
-	}
+}
-	</style>
 
-<script>
-  
-
- function DeleteRow(rowid)
-{
-	    
-		 id = rowid;		 
-		 
-	    var answer = confirm(" Do you want to delete the Requisition?")
-		if (answer) 
-		{ 	
-	      				
-			 $.ajax({ 
-			data:{id:id},
-			type:"POST",
-			url:"<?php echo base_url() ?>requisitionform/DeleteReqNo", 
-			success: function (data) {
-					if (data && data.message) {
-						alert(data.message); 
-						location.reload(true);
-					} else {
-						alert("Error Occur");
-					}
-				},
-				error: function (xhr, status, error) {
-					
-					alert("Request failed: " + error);
-				}
-			});
-			}
-		}
-       	
-
-</script>
- <style>
 span.highlight {
     background-color: yellow;
 }
-
 </style>
 
+<style>
+        .Date-filter-form {
+            display: flex;
+            align-items: center;
+            gap: 10px; /* Adjust the gap as needed */
+        }
+        .Date-filter-form input, .Date-filter-form button {
+            padding: 5px;
+            font-size: 14px;
+        }
+        .Date-filter-form button {
+            background-color: #007bff;
+            color: white;
+            border: none;
+            cursor: pointer;
+        }
+        .Date-filter-form button:hover {
+            background-color: #0056b3;
+        }
+        .icon-button {
+            background: none;
+            border: none;
+            cursor: pointer;
+            color: #007bff;
+            font-size: 18px;
+        }
+        .icon-button:hover {
+            color: #0056b3;
+        }
+    </style>
+
 <div class="content-wrapper">
 
     <section class="content">
@@ -83,24 +83,51 @@ span.highlight {
         <div class="row">
             <div class="col-xs-12">
                 <div class="box">
+
                     <div class="box-header">
-					<center><b><h3 class="box-title">Requisition Listing</h3></b></center>
+                        <center><b>
+                                <h3 class="box-title">Requisition Listing</h3>
+                            </b></center>
 
                     </div><!-- /.box-header -->
+
                     <?php if($DraftCount > 0 ) {?><p style="text-align: center;">
-                  <span class="highlight">The Requisition No <b><?php echo $ReqNo;?></b> is in Draft status.</span>  Please act on the requisition.<span class="highlight">Then only you can raise New Requisition. </span>
+                        <span class="highlight">The Requisition No <b><?php echo $ReqNo;?></b> is in Draft
+                            status.</span> Please act on the requisition.<span class="highlight">Then only you can raise
+                            New Requisition. </span>
                     </p> <?php } ?>
+
                     <div class="row">
                         <div class="col-md-12 text-right" style="margin-left:-2%;">
                             <div class="form-group">
-				   <?php if($DraftCount == 0)
-				   {					   ?>
-				   <a class="btn btn-success" onclick="Test()" href="<?php echo base_url(); ?>RequisitionForm">Raise New Requisition</a><?php   }?>
 
+                                <div class="col-md-8">
+                                    <form class="Date-filter-form" id="DateRangeFilter" >
+									    <input type="hidden"  name="table" value="requisition">
+                                        <label for="fromDate">From:</label>
+                                        <input type="text" id="fromDate" name="fromDate" placeholder="Select From Date" autocomplete="off" required>
+
+                                        <label for="toDate">To:</label>
+                                        <input type="text" id="toDate" name="toDate" placeholder="Select To Date" autocomplete="off" required>
+
+                                        <button type="submit">Search</button>
+										<i class="fa fa-repeat" aria-hidden="true" class="icon-button" id="resetButton" title="Reset"></i>
+										<div class="error" id="error"></div>
+                                    </form>
+                                </div>
+
+                                <div class="col-md-4">
+                                    <?php if($DraftCount == 0) { ?>
+                                    <a class="btn btn-success" onclick="Test()"
+                                        href="<?php echo base_url(); ?>RequisitionForm">Raise New Requisition</a>
+                                    <?php   }?>
                                 </div>
                             </div>
                         </div>
-                  <table id="Requisition"  class="table table-bordered table-hover" style="background-color:#fff;font-size:12px;">
+                    </div>
+
+                    <table id="Requisition" class="table table-bordered table-hover"
+                        style="background-color:#fff;font-size:12px;">
                         <thead style="background-color: #ddd;">
                             <tr>
                                 <th>Requisted Date</th>
@@ -140,7 +167,14 @@ span.highlight {
 
                             <td><?php echo $record->StatusName ?></td>
 
-					<td>   <a  	 data-toggle="tooltip"  href="<?php echo base_url().'EditRequisitionForm?ReqNo='.$record->ReqNo.'&ReqType='.$record->ReqType; ?>"><i class="fa fa-pencil" data-toggle="tooltip" title="<?php echo $record->ReqNo; ?>  -  Click here to view Requisition details"></i>&nbsp;&nbsp;&nbsp;</a> <a data-toggle="tooltip"  onclick="DeleteRow('<?php echo $record->ReqNo; ?>' )"   ><span class="glyphicon glyphicon-trash" title="<?php echo $record->ReqNo; ?>  -  Click here to Delete Requisition details"></span></a> </td>            
+                            <td> <a data-toggle="tooltip"
+                                    href="<?php echo base_url().'EditRequisitionForm?ReqNo='.$record->ReqNo.'&ReqType='.$record->ReqType; ?>"><i
+                                        class="fa fa-pencil" data-toggle="tooltip"
+                                        title="<?php echo $record->ReqNo; ?>  -  Click here to view Requisition details"></i>&nbsp;&nbsp;&nbsp;</a>
+                                <a data-toggle="tooltip" onclick="DeleteRow('<?php echo $record->ReqNo; ?>' )"><span
+                                        class="glyphicon glyphicon-trash"
+                                        title="<?php echo $record->ReqNo; ?>  -  Click here to Delete Requisition details"></span></a>
+                            </td>
                         </tr>
 
                         <?php
@@ -154,39 +188,175 @@ span.highlight {
             </div>
         </div>
     </section>
-				</div>
+</div>
-				<script src="https://cdn.datatables.net/plug-ins/1.10.11/sorting/date-eu.js"></script>
+
-	<script>
+<script src="https://cdn.datatables.net/plug-ins/1.10.11/sorting/date-eu.js"></script>
-	$(function () {
+<script>
+function DeleteRow(rowid) {
+
+    id = rowid;
+
+    var answer = confirm(" Do you want to delete the Requisition?")
+    if (answer) {
+
+        $.ajax({
+            data: {
+                id: id
+            },
+            type: "POST",
+            url: "<?php echo base_url() ?>requisitionform/DeleteReqNo",
+            success: function(data) {
+                if (data && data.message) {
+                    alert(data.message);
+                    location.reload(true);
+                } else {
+                    alert("Error Occur");
+                }
+            },
+            error: function(xhr, status, error) {
+
+                alert("Request failed: " + error);
+            }
+        });
+    }
+}
+</script>
+
+<!-- 
+<script>
+$(function() {
 
-		// $('#Requisition').DataTable({
-		// "paging": true,
-		// "lengthChange": true,
-		// "searching": true,
-		// "ordering": true,
-		// "columnDefs": [{"targets": 0, "type": "date-eu"}],
-		// "aaSorting": [[1, "desc"]],
-		// "info": true,
-		// "autoWidth": true,
-		// "pageLength": 10  
-		// });
 
     $(document).ready(function() {
         $('#Requisition').DataTable({
-			"paging": true,              // Enable pagination
+            "paging": true, 
-			"lengthChange": true,        // Enable the option to change the number of rows per page
+            "lengthChange": true, 
-			"searching": true,           // Enable searching
+            "searching": true, 
-			"ordering": true,            // Enable column ordering
+            "ordering": true, 
-			"columnDefs": [{"targets": 0, "type": "date-eu"}],  // Column definitions for date formatting
+            "columnDefs": [{
-			"aaSorting": [[1, "desc"]],   // Default sorting: sort by the 2th column (index 1) in descending order
+                "targets": 0,
-			"info": true,                // Show pagination info
+                "type": "date-eu"
-			"autoWidth": true,           // Enable automatic column width adjustment
+            }], 
-			"pageLength": 10,             // Set the default number of rows per page to 10
+            "aaSorting": [
-			"lengthMenu": [10, 25, 50, 100]  // Options for the number of rows per page in the dropdown
+                [1, "desc"]
+            ], 
+            "info": true, 
+            "autoWidth": true, 
+            "pageLength": 10, 
+            "lengthMenu": [10, 25, 50,
+                100
+            ] 
         });
     });
 
 
-  });
+});
-	</script>
 
+
+
+
+$(function() {
+            $("#fromDate").datepicker({
+				dateFormat: 'dd-mm-yy',
+                onSelect: function(selectedDate) {
+                    var minDate = $(this).datepicker("getDate");
+                    $("#toDate").datepicker("option", "minDate", minDate);
+                }
+            });
+
+            $("#toDate").datepicker({
+				dateFormat: 'dd-mm-yy',
+                onSelect: function(selectedDate) {
+                    var maxDate = $(this).datepicker("getDate");
+                    $("#fromDate").datepicker("option", "maxDate", maxDate);
+                }
+            });
+
+            $("#resetButton").click(function() {
+                $("#fromDate").datepicker("setDate", null);
+                $("#toDate").datepicker("setDate", null);
+            });
+
+
+			
+});
+</script> -->
+
+
+
+
+<script>
+$(document).ready(function() {
+    // Initialize the DataTable
+    var table = $('#Requisition').DataTable({
+        "paging": true,
+        "lengthChange": true,
+        "searching": true,
+        "ordering": true,
+        "columnDefs": [{
+            "targets": 0,
+            "type": "date-eu"
+        }],
+        "aaSorting": [
+            [1, "desc"]
+        ],
+        "info": true,
+        "autoWidth": true,
+        "pageLength": 10,
+        "lengthMenu": [10, 25, 50, 100]
+    });
+
+    // Initialize the datepickers
+    $("#fromDate").datepicker({
+        dateFormat: 'dd-mm-yy',
+        onSelect: function(selectedDate) {
+            var minDate = $(this).datepicker("getDate");
+            $("#toDate").datepicker("option", "minDate", minDate);
+        }
+    });
+
+    $("#toDate").datepicker({
+        dateFormat: 'dd-mm-yy',
+        onSelect: function(selectedDate) {
+            var maxDate = $(this).datepicker("getDate");
+            $("#fromDate").datepicker("option", "maxDate", maxDate);
+        }
+    });
+
+    // Reset button functionality
+    $("#resetButton").click(function() {
+        $("#fromDate").datepicker("setDate", null);
+        $("#toDate").datepicker("setDate", null);
+        $("#toDate").datepicker("option", "minDate", null); 
+        $("#fromDate").datepicker("option", "maxDate", null);
+        table.draw();
+    });
+
+    // Date range filter
+    $.fn.dataTable.ext.search.push(
+       
+        function(settings, data, dataIndex) {
+            var fromDate = $("#fromDate").datepicker("getDate");
+            var toDate = $("#toDate").datepicker("getDate");
+           
+            var dateStr = data[0]; // Assuming the date is in the first column
+           
+            // Convert dateStr to Date object
+            var dateParts = dateStr.split("-");
+            var date = new Date(dateParts[2], dateParts[1] - 1, dateParts[0]); // Convert dd-mm-yyyy to Date object
+
+            if (!fromDate || !toDate) {
+                return true; // No filter if dates are not selected
+            }
+
+            return date >= fromDate && date <= toDate;
+        }
+    );
+
+    // Handle form submission
+    $("#DateRangeFilter").submit(function(e) {
+        e.preventDefault();
+        table.draw();
+    });
+});
+</script>