[Bug]: DateRange date_range.start is the day before the value selected in the control

[olegam]

Describe the bug

The date_range.start is the day before the actual value selected. See below example where DateRange has a selection of Jan 1, 2024 - Dec 31, 2024, but the value of inputs.selected_date_range.start used in the query is 2023-12-31. I'm in the GMT+1 time zone.

Steps to Reproduce

Here is the sample code to reproduce:

---
title: Date range bug
---

<DateRange
    name=selected_date_range
    title="Date Range"
    defaultValue='Last 12 Months'
/>

```sql filtered_orders
WITH sample_orders AS (
  SELECT * FROM (
    VALUES ('2023-12-31'::DATE, 'Customer A', 1500.00), ('2024-01-15'::DATE, 'Customer B', 2300.00),
      ('2024-01-28'::DATE, 'Customer C', 1800.00)
  ) AS t(date, customer_name, price)
)
SELECT * FROM sample_orders
WHERE date between '${inputs.selected_date_range.start}' and '${inputs.selected_date_range.end}'
ORDER BY date ASC
```

<DataTable data={filtered_orders} />

Logs

System Info

Severity

serious, but I can work around it

Additional Information, or Workarounds

No response

[olegam]

The problem also exists when using DateInput with range=true

[fsd-niraj]

I'd like to work on this

[sgsfak]

This bug also affects the end point of the range, as shown in the screenshot: The user selected the date range up to Dec 31, but the inputs.selected_date_range.end has value 2024-12-30.

[biscout42]

Same is in the docs: https://docs.evidence.dev/components/inputs/date-range/

[Barlock42]

Yep, encountered the same bug.

[justdmitry]

Does anybody know good workaround? Something better than adding +1 day to every-every query that uses date range filter.

[patextreme]

I have encountered this problem as well. My workaround is to create a wrapper component, but I am looking forward to an upstream fix.

This is my workaround:

In components/DateRangeAdjusted.svelte:

<script>
  import { getInputContext } from "@evidence-dev/sdk/utils/svelte";
  import { DateRange } from "@evidence-dev/core-components";
  import { onMount } from 'svelte';

  const inputs = getInputContext();

  /** @type {string | undefined} */
  export let name;

  const nameInner = name + "_inner";
  let isMounted = false;

  function shiftDateStr(dateStr, n) {
    const date = new Date(dateStr + "T00:00:00Z");
    date.setUTCDate(date.getUTCDate() + n);
    return date.toISOString().slice(0, 10);
  }

  $: {
    if (isMounted) {
      $inputs[name] = {
        start: shiftDateStr($inputs[nameInner].start, 1),
        end: shiftDateStr($inputs[nameInner].end, 1)
      };
    }
  }

  onMount(() => {
    $inputs[name] = {
      start: shiftDateStr($inputs[nameInner].start, 1),
      end: shiftDateStr($inputs[nameInner].end, 1)
    };
    isMounted = true;
  });
</script>

<DateRange {...$$restProps} name={nameInner} />

In the markdown:

<DateRangeAdjusted
  name=my_date_range
  defaultValue="Last 90 Days"
/>

Start = {inputs.my_date_range.start}  
End date = {inputs.my_date_range.end}

I only tested this with my timezone (UTC+7), and it works for my use case. Hope this helps!

Edit 1: I'm a little sad this doesn't work well with evidence build Edit 2: Make this work nicely with evidence build