How do I filter date range in DataTables

Question

I have a large dataTable which contains ride information  Every row has a start datetime and an end datetime of the following format yyyy-mm-dd HH mm ss   How can I use a datepicker for setting a filter range in dataTables  I want to have a datepicker which only selects a day and not the time  I ve searched everywhere for the proper answer but I couldn t find it  Thanks in advance for helping   For example I want to see all rows of July by selecting  01-07-2016 - 31-07-2016

User · Answer

Here is my solution  there is no way to use momemt js Here is DataTable with Two DatePickers for DateRange  To and From  Filter    fn dataTable ext search push    function  settings  data  dataIndex        var min       min   datepicker  quot getDate quot        var max       max   datepicker  quot getDate quot        var startDate   new Date data 4        if  min    null  amp  amp  max    null    return true        if  min    null  amp  amp  startDate  lt   max    return true        if  max    null  amp  amp  startDate  gt   min    return true        if  startDate  lt   max  amp  amp  startDate  gt   min    return true        return false

User · Answer

Follow the link below and configure it to what you need  Daterangepicker does it for you  very easily       http   www daterangepicker com  ex1

User · Answer

Using other posters code with some tweaks   lt table id  quot MainContent tbFilterAsp quot  style  quot margin-top -15px  quot  gt           lt tbody gt               lt tr gt                   lt td style  quot vertical-align initial  quot  gt  lt label for  quot datepicker from quot  id  quot MainContent datepicker from lbl quot  style  quot margin-top 7px  quot  gt From date  lt  label gt  amp nbsp                   lt  td gt                                    lt td style  quot padding-right  20px  quot  gt  lt input name  quot ctl00 MainContent datepicker from quot  type  quot text quot  id  quot datepicker from quot  class  quot datepick form-control hasDatepicker quot  autocomplete  quot off quot  style  quot cursor pointer  background-color   FFFFFF quot  gt  amp nbsp  amp nbsp  amp nbsp                   lt  td gt                                    lt td style  quot vertical-align initial quot  gt  lt label for  quot datepicker to quot  id  quot MainContent datepicker to lbl quot  style  quot margin-top 7px  quot  gt To date  lt  label gt  amp nbsp                   lt  td gt                                    lt td style  quot padding-right  20px  quot  gt  lt input name  quot ctl00 MainContent datepicker to quot  type  quot text quot  id  quot datepicker to quot  class  quot datepick form-control hasDatepicker quot  autocomplete  quot off quot  style  quot cursor pointer  background-color   FFFFFF quot  gt  amp nbsp  amp nbsp  amp nbsp                                           lt  td gt                                    lt td style  quot vertical-align initial quot  gt  lt a onclick  quot     datepicker from   val          datepicker to   val      return false  quot  id  quot datepicker clear lnk quot  style  quot margin-top 7px  quot  gt Clear lt  a gt  lt  td gt               lt  tr gt           lt  tbody gt       lt  table gt            lt script gt            document  ready function                   function                     var oTable       tbAD   DataTable                    quot oLanguage quot                          quot sSearch quot    quot Filter Data quot                                      quot iDisplayLength quot   -1                   quot sPaginationType quot    quot full numbers quot                    quot pageLength quot   50                                           quot  datepicker from quot   datepicker                       quot  datepicker to quot   datepicker                         datepicker from   change function  e                        oTable draw                                            datepicker to   change function  e                        oTable draw                                            datepicker clear lnk   click function  e                        oTable draw                                                          fn dataTable ext search push                  function  settings  data  dataIndex                    var min       datepicker from   datepicker  quot getDate quot      null   null       datepicker from   datepicker  quot getDate quot   setHours 0 0 0 0                   var max       datepicker to   datepicker  quot getDate quot      null   null       datepicker to   datepicker  quot getDate quot   setHours 0 0 0 0                   var startDate   new Date data 9   setHours 0 0 0 0                   if  min    null  amp  amp  max    null    return true                    if  min    null  amp  amp  startDate  lt   max    return true                    if  max    null  amp  amp  startDate  gt   min    return true                    if  startDate  lt   max  amp  amp  startDate  gt   min    return true                                        return false                                                lt  script gt

User · Answer

Here is my solution  cobbled together from the range filter example in the datatables docs  and letting moment js do the dirty work of comparing the dates    HTML   lt input      type  text       id  min-date      class  date-range-filter      placeholder  From  yyyy-mm-dd  gt    lt input      type  text       id  max-date       class  date-range-filter      placeholder  To  yyyy-mm-dd  gt    lt table id  my-table  gt       lt thead gt           lt tr gt               lt th gt ID lt  th gt               lt th gt Name lt  th gt               lt th gt Created At lt  th gt           lt  tr gt       lt  thead gt   lt  table gt    JS  Install Moment  npm install moment     Assign moment to global namespace window moment   require  moment        Set up your table table       my-table   DataTable              do your thing here          Extend dataTables search   fn dataTable ext search push      function  settings  data  dataIndex             var min        min-date   val            var max        max-date   val            var createdAt   data 2     0     Our date column in the table          if                       min          max                                               moment createdAt  isSameOrAfter min   amp  amp  moment createdAt  isSameOrBefore max                                         return true                    return false               Re-draw the table when the a date range filter changes     date-range-filter   change  function         table draw           JSFiddle Here  Notes   Using moment decouples the date comparison logic  and makes it easy to work with different formats  In my table  I used yyyy-mm-dd  but you could use mm dd yyyy as well  Be sure to reference moment s docs when parsing other formats  as you may need to modify what method you use

User · Answer

x000D   x000D     fn dataTable ext search push  x000D      function  settings  data  dataIndex    x000D          var FilterStart       filter From   val    x000D          var FilterEnd       filter To   val    x000D          var DataTableStart   data 4  trim    x000D          var DataTableEnd   data 5  trim    x000D          if  FilterStart          FilterEnd          x000D              return true  x000D            x000D          if  DataTableStart  gt   FilterStart  amp  amp  DataTableEnd  lt   FilterEnd  x000D            x000D              return true  x000D            x000D          else   x000D              return false  x000D            x000D           x000D          x000D      -------------------------- x000D       filter From   change function  e    x000D          Table draw    x000D   x000D          x000D          filter To   change function  e    x000D            Table draw    x000D   x000D          x000D   x000D   x000D

User · Answer

Following one is working fine with moments js 2 10 and above    fn dataTableExt afnFiltering push          function  settings  data  dataIndex                 var min        min-date   val               var max        max-date   val               var createdAt   data 0     0     Our date column in the table               createdAt createdAt split                   var startDate     moment min   DD MM YYYY                var endDate       moment max   DD MM YYYY                var diffDate   moment createdAt   DD MM YYYY                  console log startDate               if                  min          max                          diffDate isBetween startDate  endDate                      return true                 return false

User · Answer

Here is DataTable with Single DatePicker as  from  Date Filter  LiveDemo  Here is DataTable with Two DatePickers for DateRange  To and From  Filter  LiveDemo

[javascript] How do I filter date range in DataTables?

Examples related to javascript

Examples related to datetime

Examples related to filter

Examples related to datatables