Denmark Puso

Denmark Puso

  • 1.7k
  • 145
  • 3.3k

Date range filter not working

Oct 17 2019 4:19 AM
im trying to filter the DatePickedUp field with range but my code doesnt working plesase help thanks.
 
  1. <div class="ContainerBanner">  
  2.     <h3 class="pickups">Packages</h3> <br />  
  3.     <p id="date_filter">  
  4.         <span id="date-label-from" class="date-label">From: </span><input class="date_range_filter date" type="text" id="datepicker_from" />  
  5.         <span id="date-label-to" class="date-label">To: </span><input class="date_range_filter date" type="text" id="datepicker_to" />  
  6.     </p>  
  7.   
  8.     <table id="example" class="display table table-striped" style="width:100%">  
  9.         <thead> 
  10.             <tr>  
  11.                 <th>Package #</th>  
  12.                 <th>Tracking #</th>  
  13.                 <th>Agent</th>  
  14.                 <th>Client</th>  
  15.                 <th>Contact #</th>  
  16.                 <th>Address</th>  
  17.                 <th>Date Posted</th>  
  18.                 <th>Pickup Date</th>  
  19.                 <th>Status</th>  
  20.                 <th>Date Pickedup</th>  
  21.                 <th>Notes</th>  
  22.                 <th></th>  
  23.             </tr>  
  24.         </thead>  
  25.         <tbody></tbody>  
  26.     </table>  
  27.     @if ((Roles.IsUserInRole("Administrator")) || (Roles.IsUserInRole("Agent")) || (Roles.IsUserInRole("Sub-Agent")))  
  28.     {  
  29.         <a href="@Url.Action("addoredit", "pickup")" class="btn btn-primary btn-sm"><i class="fas fa-calendar-check"></i>  Schedule a Pickup</a>  
  30.     }  
  31. </div>  
 
  1. <script type="text/javascript">  
  2.     $(function () {  
  3.         var oTable = $('#example').DataTable({  
  4.             "ajax""@Url.Action("getpickuplist", "pickup")",  
  5.             "oLanguage": { "sSearch""Filter Data" },  
  6.             "sPaginationType""full_numbers",  
  7.             "columns": [  
  8.                 { "data""ReferenceNumber" },  
  9.                 { "data""TrackingNumber" },  
  10.                 { "data""AgentName" },  
  11.                 { "data""ClientFullName" },  
  12.                 { "data""PrimaryContact" },  
  13.                 { "data""Address" },  
  14.                 { "data""DatePosted" },  
  15.                 { "data""PickupDate" },  
  16.                 { "data""Status" },  
  17.                 { "data""DatePickedup" },  
  18.                 { "data""Notes" },  
  19.                 {  
  20.                     "render"function (data, type, full, meta) {  
  21.                         return "<button class='btn btn-primary btn-sm' onclick='edit(" + full.Id + ")'><i class='fas fa-user-edit'></i></button>"  
  22.                     }  
  23.                 }  
  24.             ]  
  25.         });  
  26.   
  27.         $("#datepicker_from").datepicker({  
  28.             showOn: "button",  
  29.             buttonImage: "images/calendar.gif",  
  30.             buttonImageOnly: false,  
  31.             "onSelect"function (date) {  
  32.                 minDateFilter = new Date(date).getTime();  
  33.                 oTable.fnDraw();  
  34.             }  
  35.         }).keyup(function () {  
  36.             minDateFilter = new Date(this.value).getTime();  
  37.             oTable.fnDraw();  
  38.         });  
  39.   
  40.         $("#datepicker_to").datepicker({  
  41.             showOn: "button",  
  42.             buttonImage: "images/calendar.gif",  
  43.             buttonImageOnly: false,  
  44.             "onSelect"function (date) {  
  45.                 maxDateFilter = new Date(date).getTime();  
  46.                 oTable.fnDraw();  
  47.             }  
  48.         }).keyup(function () {  
  49.             maxDateFilter = new Date(this.value).getTime();  
  50.             oTable.fnDraw();  
  51.         });  
  52.     });  
  53.   
  54.     // Date range filter  
  55.     minDateFilter = "";  
  56.     maxDateFilter = "";  
  57.   
  58.     $.fn.dataTableExt.afnFiltering.push(  
  59.         function (oSettings, aData, iDataIndex) {  
  60.             if (typeof aData._date == 'undefined') {  
  61.                 aData._date = new Date(aData[9]).getTime();  
  62.             }  
  63.             if (minDateFilter && !isNaN(minDateFilter)) {  
  64.                 if (aData._date < minDateFilter) {  
  65.                     return false;  
  66.                 }  
  67.             }  
  68.             if (maxDateFilter && !isNaN(maxDateFilter)) {  
  69.                 if (aData._date > maxDateFilter) {  
  70.                     return false;  
  71.                 }  
  72.             }  
  73.             return true;  
  74.         }  
  75.     );      

Answers (1)