Bootstrap data table filter between two date like week to week

Question

I am trying to filter bootstrap data table data with given week date

this example of to gate date of the previous week, current week, next week https://jsfiddle.net/prtk/znbx32j1/1/

this example for filter data http://plnkr.co/edit/mdeEYoZtnvpfHCdtSxDP?p=preview and this is the link for I used both examples

JSFiddle for example - https://jsfiddle.net/g90wk05e/1/

the issue with my example is that when you click next or previous week this 14/09/2017 and 16/09/2017 date are not filtering it stay on the table.

when I change those two dates it's working but 14/16 not working

and if the date does not find on the table that time also not clear the data table.

HTML


  


    
      Select Week
      
        
          
        
        
        
          
        
      
    

    
      View 
      
        Weekly
        Monthly
      
                    
  

  
    
      Show  entries
Search:
 
        
          Today 5 
         
        
          
        
         
               
               
              14/09/2017
              Meetingnay   
               
                
            
 
               
              11/09/2017
              Phonegoku   
               
                
            
 
               
              16/09/2017
              Phonetest6   
               
                
            
 
               
              05/09/2017
              Meetingtest5   
               
                
            
 
               
              07/09/2017
              Phonetest4   
               
                
            
 
               
              01/09/2017
              Phonetest3   
               
                
            
 
               
              09/09/2017
              Phonetestu   
               
                
            
 
               
              02/09/2017
              Phonetest1   
               
                
             
      
Showing 1 to 8 of 8 entries
Previous
1
Next

js

var table = $('#task_list').DataTable();


      var weekpicker, start_date, end_date;

        function set_week_picker(date) {
            start_date = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
            end_date = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);

            weekpicker.datepicker('update', start_date);
            weekpicker.val( start_date.getDate() + '/' + (start_date.getMonth() + 1) + '/' + start_date.getFullYear() + ' - ' + end_date.getDate() + '/' + (end_date.getMonth() + 1) + '/' + end_date.getFullYear());

           start_date2 = start_date.getDate() + '/' + (start_date.getMonth() + 1) + '/' + start_date.getFullYear();
           end_date2 = end_date.getDate() + '/' + (end_date.getMonth() + 1) + '/' + end_date.getFullYear();


        }

        weekpicker = $('.week-picker');
        console.log(weekpicker);
        weekpicker.datepicker({
            autoclose: true,
            forceParse: false,
            container: '#week-picker-wrapper',
        }).on("changeDate", function(e) {
            set_week_picker(e.date);

        });
        $('.week-prev').on('click', function() {
            var prev = new Date(start_date.getTime());
            prev.setDate(prev.getDate() - 1);
            set_week_picker(prev);
            table.draw();
        });

        $('.week-next').on('click', function() {
            var next = new Date(end_date.getTime());
            next.setDate(next.getDate() + 1);
            set_week_picker(next);
            table.draw();
        });
        set_week_picker(new Date);

        start_date2 = "";
        end_date2 = "";


        $.fn.dataTable.ext.search.push(
          function( settings, data, dataIndex ) {
            console.log(data);
              var min = new Date(start_date2).getTime();
              var max = new Date(end_date2).getTime();


                  if (typeof data._date == 'undefined') {

                    data._date = new Date(data[1]).getTime();

                  }
                  //console.log(min+'-'+max+'-'+date_value);
                  console.log(start_date2+'-'+end_date2+'-'+data[1]);
                  if (min && !isNaN(min)) {
                   if (data._date < min) {
                      return false;
                    }
                  }

                  if (max && !isNaN(max)) {
                    if (data._date > max) {
                      return false;
                    }
                  }
                  return true;

          }
      );

Nidhin Chandran · Accepted Answer

You have an issue with the date format. You are using 'dd/mm/yyyy' and javascript is parsing it using 'mm/dd/yyyy' format. Check this fiddle. I forked your fiddle and modified it. I changed the assignment of start_date2 and end_date2 in set_week_picker function and modified datatable function to convert date format (borrowed form this stackoverflow answer).

Modified parts:

Function set_week_picker(date)

start_date2 = (start_date.getMonth() + 1) + '/' + start_date.getDate() + '/' + start_date.getFullYear(); end_date2 = (end_date.getMonth() + 1) + '/' + end_date.getDate() + '/' + end_date.getFullYear();

Function .fn.dataTable.ext.search.push data[1] = data[1].split(/\//).reverse().join('/');

This is not a production ready solution, you need to optimize the code but this will give you the idea.

Bootstrap data table filter between two date like week to week

Answers (1)

Related Questions