using rangedate filter in primereact datatable

Question

I have an issue with my rangedate filter in Next.js-TypeScript. I am using primereact library. Here is the code:

const [filters, setFilters] = useState<DataTableFilterMeta>({
    woroStartDate: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode:         FilterMatchMode.DATE_IS }] },
    woroStatus: { value: 'OPEN', matchMode: FilterMatchMode.EQUALS }, //other column filter
    });

const [startDate, setStartDate] = useState<string | Date | Date[] | null>(null);
    const [endDate, setEndDate] = useState<string | Date | Date[] | null>(null);

const handleStartDateChange = (e: any) => {
    setStartDate(e.value);
  };
  const handleEndDateChange = (e: any) => {
    setEndDate(e.value);
  };

const onDateFilterChange = () => {
  const newFilters = { ...filters };

  if (startDate && endDate) {
      const startDateValue = startDate ? startDate.toString() : null;
      const endDateValue = endDate ? endDate.toString() : null;

    newFilters['woroStartDate'] = {
      matchMode: FilterMatchMode.DATE_IS,
      value: [startDateValue, endDateValue],
    };
  } else {
    newFilters['woroStartDate'] = {
      operator: FilterOperator.AND,
      constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }],
    };
  }
  setFilters(newFilters);
};

//filter form
<div>
 const renderHeader = () => {
    return (
            <Calendar className="w-full md:w-10rem" value={startDate} onChange={handleStartDateChange} dateFormat="dd/mm/yy" showButtonBar />
            <span className="mx-2">to</span>
            <Calendar className="w-full md:w-10rem" value={endDate} onChange={handleEndDateChange} dateFormat="dd/mm/yy" showButtonBar /> 

             <React.Fragment>
             <Button className="ml-2" severity="secondary" type="button" tooltip="Filter Date" tooltipOptions={{ position: 'right', showDelay: 300 }} icon="pi pi-filter" outlined rounded onClick={onDateFilterChange} />
             </React.Fragment>
           </div> 
);
};
const header = renderHeader();

//datatable and column
<DataTable
value={woros}
filters={filters}
emptyMessage="No Work Order found."
globalFilterFields={['woroStartDate', 'woroStatus']}
header={header} >

<Column 
field="woroStartDate" 
header="WorkOrder Date" 
sortable 
style={{ width: '25%' }}
body={(rowData: any) =>
new Date(rowData.woroStartDate).toLocaleDateString("en-GB", {
day: "numeric",
month: "short", 
year: "numeric"
})
}
/>

The filter has not been successful in filtering my datatable. And when I click the filter button, there is an error: TypeError: value.toDateString is not a function.

And there are only 20 data in the table, so it seems that no changes are needed on the backend, but I still haven't found a solution for this yet. hope someone can help me. thanks..

I could be wrong but both `Calendar` and your filter are expecting `Date` values and you look like you are converting and trying to use `String` values which most likely is the issue and explains the `toDateString()` is not a function as your value is probably a `String` and not a real `Date`. — Melloware, May 25 '23 at 13:08
I doubt it. that is make me confuses too. I tried converting it to a string because using Date didn't work either. I thought that by converting it to a string, the result would match the String Date format in the column... Thank you for your response, I really need a correction.. @Melloware — Nugraha, May 25 '23 at 13:59

using rangedate filter in primereact datatable

0 Answers0