TimeRangePicker

Implemented Input

Reusable time filter with relative presets, calendar selection, exact times and UTC form values.

A wdj composition built from the existing component library.

Presentation commands show demo feedback. Read the interaction guide to connect real actions.

Time range filter

Quick ranges, custom durations, calendar dates and local or UTC times with explicit Apply and Cancel.

Request activity

Choose a rolling window or an exact date and time range.

Show template

{% load wdj %}
<div class="flex w-full flex-col gap-4" x-data="{ range: null }" @wdj:time-range-change="range = $event.detail">
  <div class="flex flex-wrap items-center justify-between gap-3">
    <div class="grid gap-1"><p class="text-base font-medium">Request activity</p><p class="text-base text-kumo-subtle">Choose a rolling window or an exact date and time range.</p></div>
    {% include "wdj/components/time_range_picker.html" with id="activity-time-range" only %}
  </div>
  <p class="text-base text-kumo-subtle" role="status" x-text="range ? 'Applied: ' + range.start + ' to ' + range.end : 'The last hour is selected. Changes are applied when you choose Apply.'"></p>
</div>

Form integration

Custom presets, initial UTC values, JSON form submission and native reset.

Show template

{% load wdj %}
<form class="flex w-full flex-col gap-4" x-data="{ result: '' }" @submit.prevent="result = JSON.stringify(JSON.parse(new FormData($event.target).get('period')), null, 2)" @reset="result = ''">
  <div class="flex flex-wrap items-center gap-3">
    {% include "wdj/components/time_range_picker.html" with id="report-time-range" name="period" value=time_range_initial presets=time_range_presets only %}
    {% include "wdj/components/button.html" with type="submit" label="Submit form" only %}
    {% include "wdj/components/button.html" with type="reset" label="Reset" variant="ghost" only %}
  </div>
  <p class="text-base text-kumo-subtle">A custom preset list, an initial absolute UTC range and native form reset.</p>
  <output class="block whitespace-pre-wrap break-words font-mono text-sm" x-text="result" aria-live="polite"></output>
</form>

API Reference

Prop	Type	Default	Description
value	dict: {mode, seconds?, start?, end?, timezone}	Last 1 hour, local time	Relative: {mode: relative, seconds, timezone}. Absolute: {mode: absolute, start, end, timezone}. Start/end require UTC or offset ISO timestamps; timezone is local or UTC.
name	string	time_range	One hidden JSON field containing mode, UTC start/end, timezone and seconds for relative ranges. Updated only on Apply.
id	string	unset	Stable unique DOM ID; important for HTMX targets and focus restoration.
presets	list[dict]	30m, 1h, 6h, 12h, 24h, 7d, 30d	List of {seconds, label}; whole-minute durations from 60 to 31536000 seconds. An empty list hides quick ranges.
allow_future	bool	False	Allow future end times and calendar days. Disabled by default for activity filters.
disabled	bool	False	Disable the trigger and omit the value from native form submission.
class	string	""	Class; pass the documented value shown in the examples.

Accessibility notes

Every interactive component keeps real semantics and keyboard support: native controls where possible, ARIA only where necessary, and a visible focus ring. See the Accessibility page for the shared contract.

Read the accessibility contract