I'm using the PrimeReact DataTable, and am trying to filter on a date column. I'm using PrimeReact's built-in UI but am doing custom stuff after the filter is set. This all works fine, except I'm getting the wrong data returned having filtered a date column.
In the UI, I set the "Date Is" filter to 11 September 2013 (say). That just happens to be an example I'm using. Not even a hint of a time zone. But when I debug my code, what I'm seeing is "Wed Sep 11 2013 00:00:00 GMT+0100 (British Summer Time)". PrimeReact has added the time zone. I suppose it is being complete, but this causes me problems down the line because everything else in the app is UTC.
I want to be able to turn this off. I just want to pass the date. Maybe just truncate, if necessary, but I was wondering, does anybody know how to do this, perhaps just setting something?
I don't know details for primereact, but from what I understand dates in JS are always tied to a timezone, and when you create a date, say with new Date()
the created object has a UTC offset tied to it and calling getTimezoneOffset
function on the date returns the offset in minutes.
So most filter system you're likely manipulating string elements that represent component of date / datetime data. At some point these elements need to be parsed into a date, and with JS this will contextualize the date value with the locale available to the browser (or something like that).
So in general, since JS has no support for "naive" date/datetime objects you can approximate/replicate this behavior by directly building the date object in the UTC timezone, ie: UTC offset = 0. There may also be libraries for this but generally you can do new Date(Date.UTC(<year>,<month>,<day>, <[... optional_time_components]))
. So then you've parsed the string into UTC date object. Keep in mind month is 0 indexed so if you have '2024-01-01' you should build .UTC(2024,0,1)
. Day (called date) is 1 indexed though.
So in your case you may want to register a custom filter in prime react where you get the value as a string and parse it into a UTC date and perform the operations on dates there. https://primereact.org/datatable/#custom_filter