From f21570224e4c990e6fd283c3c9b4576263aeb564 Mon Sep 17 00:00:00 2001
From: dualfroz <me@dualfroz.com>
Date: Sat, 17 Oct 2026 04:21:20 +0200
Subject: [PATCH] fix(timeRangeSelector): Allow selecting today's UTC date

With UTC enabled, the absolute date range picker still capped the
calendar at the local `new Date()`. When the local date was a day
behind UTC, today's UTC date was disabled and could not be picked.

Convert the max date with `getUtcToSystem` when `utc` is set, the
same conversion the selector already applies to the start and end
dates.
---
 .../timeRangeSelector/dateRange.spec.tsx      | 35 +++++++++++++++++++
 .../timeRangeSelector/dateRange.tsx           |  3 +-
 2 files changed, 37 insertions(+), 1 deletion(-)
 create mode 100644 static/app/components/timeRangeSelector/dateRange.spec.tsx

diff --git a/static/app/components/timeRangeSelector/dateRange.spec.tsx b/static/app/components/timeRangeSelector/dateRange.spec.tsx
new file mode 100644
index 0000000..6cde320
--- /dev/null
+++ b/static/app/components/timeRangeSelector/dateRange.spec.tsx
@@ -0,0 +1,35 @@
+import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
+import {resetMockDate, setMockDate} from 'sentry-test/utils';
+
+import {DateRange} from 'sentry/components/timeRangeSelector/dateRange';
+
+jest.unmock('react-date-range');
+
+describe('DateRange', () => {
+  afterEach(() => {
+    resetMockDate();
+  });
+
+  it("can select today's UTC date while the local date is still the day before", async () => {
+    // 22:00 on Oct 16 in America/New_York, already Oct 17 in UTC
+    setMockDate(new Date('2017-10-17T02:00:00Z'));
+    const onChange = jest.fn();
+
+    render(
+      <DateRange
+        utc
+        start={new Date('2017-10-10T00:00:00')}
+        end={new Date('2017-10-16T23:59:59')}
+        onChange={onChange}
+        onChangeUtc={jest.fn()}
+      />
+    );
+
+    await userEvent.click(await screen.findByRole('button', {name: '17'}));
+
+    expect(onChange).toHaveBeenCalledWith({
+      start: new Date('2017-10-17T00:00:00'),
+      end: new Date('2017-10-17T23:59:59'),
+    });
+  });
+});
diff --git a/static/app/components/timeRangeSelector/dateRange.tsx b/static/app/components/timeRangeSelector/dateRange.tsx
index 4e53b2c..425cf0a 100644
--- a/static/app/components/timeRangeSelector/dateRange.tsx
+++ b/static/app/components/timeRangeSelector/dateRange.tsx
@@ -16,6 +16,7 @@ import {trackAnalytics} from 'sentry/utils/analytics';
 import {
   getEndOfDay,
   getStartOfPeriodAgo,
+  getUtcToSystem,
   isValidTime,
   setDateToTime,
 } from 'sentry/utils/dates';
@@ -195,7 +196,7 @@ class BaseDateRange extends Component<Props, State> {
     // (or really, Jan 2 @ 00:00:00 - 1 second), while the start time is at 00:00
     let minDate = getStartOfPeriodAgo('days', (maxPickableDays ?? MAX_PICKABLE_DAYS) - 1);
 
-    let maxDate = new Date();
+    let maxDate = utc ? getUtcToSystem(new Date()) : new Date();
 
     // if the start and end date are the same, it means the user can still select another date,
     // at this point we want to apply the maxDateRange