Date Range Picker Dialog Block for React

So you can see it without a click. On load the dialog is a copy drawn in place over the page: a native dialog element that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The range button opens the real Dialog, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same RangeFields component and share the block's state, so a range picked in the copy is there in the real one. In your app keep the Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.

So the presets read the same for everyone and in every screenshot. AS_OF is the one day the block treats as now: Last 7 days ends on it, This month starts on the first of its month, and the calendar and the fields refuse anything later. The helpers work on ISO strings in UTC, so no time zone moves a day. In your app replace AS_OF with the current day, taken after mount so the server and the browser agree, and keep the presets as functions of it.

They all write the same two texts, the start and the end. Picking a preset sets both; a click on the calendar sets the start, and a second click sets the end; typing in a field sets its own, and the calendar follows once it is a real date. The chosen preset is the one whose dates match, and Custom takes over when they don't. Problems show after you leave a field or press Apply, in one reserved line: an empty or unreadable date, a date after the fixed day, or an end before the start.

It takes the range's length in days and writes the same number of days just before the start: for 10 Sep to 9 Oct it says "Against 11 Aug to 9 Sep 2026". Applied, it draws the earlier period as a second, dashed line on the page behind. In your app ask your server for both periods and show the change between them next to each figure.

The chart is drawn from the dates alone, a smooth line worked out from the day numbers, and no data is fetched. Apply changes local state and the page redraws from it. In your app replace lineOf with your series for the range, and send the two dates and the compare flag to your API in the apply handler.

Yes. The real dialog is named by its title and described by its sentence, focus stays inside until it closes, and Escape, Cancel and the close button return focus to the range button. The trigger is passed to DialogTrigger through render, and the dialog is controlled with open and onOpenChange. The presets are one radio group you walk with the arrows, the calendar moves by day with the arrow keys, and the copy shown on load moves no focus; Escape inside it, Cancel and its close button close it and put focus on the range button.