score:3

so i was having the same trouble here is my solution

i have used flatpickr , moment

datefilter.tsx

export const datefilter = ({
  column: {
    filtervalue,
    setfilter,
    prefilteredrows,
    id,
  },
  rows
}: any) => {
  const dates = prefilteredrows.map((val: any) => moment(val.original[id],dateformat))
  const mindate = moment.min(dates).subtract(1,'day') // to include the date
  const maxdate = moment.max(dates).add(1, 'day') 
  return (
    <react.fragment>
      <flatpickr
        classname='form-control'
        onchange={(date) => {
          if (date.length === 2) {
            setfilter([date[0],date[1]])
          }
        }}
        options={{
          enable: [
            {
              from: mindate.todate(),
              to : maxdate.todate()
            }
          ],
          mode : 'range'
        }}
      />

  </react.fragment>

); };

now un your maintable component file . add a constant called filtertypes . and here is the object

      const filtertypes : any = {
        date: (rows: any[], id: any, filtervalue: any) => {
          let start = moment(filtervalue[0]).subtract(1, 'day')
          let end = moment(filtervalue[1]).add(1, 'day')
          return rows.filter(val => 
           moment(val.original[id],dateformat).isbetween(start, end);
          )
        }
}

don't forget to add filter and filter properties in your column definition


Related Query

More Query from same tag