noble-gold•8mo ago

How to add filtering by date

I have a filter component in a ChakraUI table, I want to select the date with a dayzed date picker In the table columns, I've defined the created_at field like this:

{
                id: "created_at",
                accessorKey: "created_at",
                header: translate("parcels.fields.created_at"),
                meta: {
                    filterOperator: "gte"
                },
                cell: function render({ getValue }) {
                    return <DateField format="DD/MM/YYYY" value={getValue<any>()} />;
                },
            },

{
                id: "created_at",
                accessorKey: "created_at",
                header: translate("parcels.fields.created_at"),
                meta: {
                    filterOperator: "gte"
                },
                cell: function render({ getValue }) {
                    return <DateField format="DD/MM/YYYY" value={getValue<any>()} />;
                },
            },

This is the filter component:

import React, { useState } from "react";
import { Input, Menu, IconButton, MenuButton, MenuList, VStack, HStack } from "@chakra-ui/react";
import { IconFilter, IconX, IconCheck } from "@tabler/icons";
import type { Column } from "@tanstack/react-table";
import { SingleDatepicker } from "chakra-dayzed-datepicker"
import { parseISO, parse, formatISO, format } from "date-fns"

export const ColumnFilter: React.FC<{ column: Column<any, any> }> = ({ column }) => {
  const [state, setState] = useState(null as null | { value: any });

  if (!column.getCanFilter()) {
    return null;
  }

  const open = () =>
    setState({
      value: column.getFilterValue(),
    });

  const close = () => setState(null);

  const change = (value: any) => setState({ value });

  const renderFilterElement = () => {
    const FilterComponent = (column.columnDef?.meta as any)?.filterElement;

    if (column.id === "created_at" && !FilterComponent && !!state) {
      return (<SingleDatepicker
        date={state.value}
        configs={{
          dateFormat: "yyyy-dd-MM"
        }}
        onDateChange={(date) => {
          change(date)
        }}
    }

import React, { useState } from "react";
import { Input, Menu, IconButton, MenuButton, MenuList, VStack, HStack } from "@chakra-ui/react";
import { IconFilter, IconX, IconCheck } from "@tabler/icons";
import type { Column } from "@tanstack/react-table";
import { SingleDatepicker } from "chakra-dayzed-datepicker"
import { parseISO, parse, formatISO, format } from "date-fns"

export const ColumnFilter: React.FC<{ column: Column<any, any> }> = ({ column }) => {
  const [state, setState] = useState(null as null | { value: any });

  if (!column.getCanFilter()) {
    return null;
  }

  const open = () =>
    setState({
      value: column.getFilterValue(),
    });

  const close = () => setState(null);

  const change = (value: any) => setState({ value });

  const renderFilterElement = () => {
    const FilterComponent = (column.columnDef?.meta as any)?.filterElement;

    if (column.id === "created_at" && !FilterComponent && !!state) {
      return (<SingleDatepicker
        date={state.value}
        configs={{
          dateFormat: "yyyy-dd-MM"
        }}
        onDateChange={(date) => {
          change(date)
        }}
    }

The problem I get is, I store dates like 2023-12-05 in Supabase, but the produced query from the frontend is filters[0][value]=2023-12-03T22:00:00.000Z

2 Replies

kapa.ai•8mo ago

Hi @3d.2478. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The issue you're facing is related to the timezone. The date you're selecting is being converted to a UTC string, which is why you're seeing the time 22:00:00.000Z for the date 2023-12-03. This is because JavaScript's Date object is based on the user's local timezone. To fix this, you can format the date to yyyy-MM-dd format using date-fns before setting it to the state. This way, you're only dealing with the date part and not the time. Here's how you can do it:

import { format } from 'date-fns';

// ...

const change = (date: Date) => {
  const formattedDate = format(date, 'yyyy-MM-dd');
  setState({ value: formattedDate });
};

// ...

import { format } from 'date-fns';

// ...

const change = (date: Date) => {
  const formattedDate = format(date, 'yyyy-MM-dd');
  setState({ value: formattedDate });
};

// ...

This will ensure that the date is sent in the yyyy-MM-dd format to the backend. Please note that the information provided is based on the code snippets and details you've provided, and it might need adjustments based on your full codebase and requirements. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•8mo ago

<@326362244860346371> kapa.ai is still learning and improving, please let us know how it did by reacting below