DateRangePicker
Partial InputStyled popup or inline range calendar with bounds, presets and separately named form values.
Kumo reference: kumo-ui.com/components/date-picker/
Presentation commands show demo feedback. Read the interaction guide to connect real actions.
Date range
Show template
{% load wdj %}
<div class="grid w-full max-w-lg gap-4">
{% include "wdj/components/date_range_picker.html" with id="range_date_range" label="Reporting period" start_value="2026-10-01" end_value="2026-10-10" only %}
</div>Presets
Show template
{% load wdj %}
<div class="grid w-full max-w-lg gap-4">
{% include "wdj/components/date_range_picker.html" with id="range_presets" label="Reporting period" presets=True only %}
</div>Boundaries
Show template
{% load wdj %}
<div class="grid w-full max-w-lg gap-4">
{% include "wdj/components/date_range_picker.html" with id="range_boundaries" label="Reporting period" min="2026-10-01" max="2026-10-31" only %}
</div>Disabled
Show template
{% load wdj %}
<div class="grid w-full max-w-lg gap-4">
{% include "wdj/components/date_range_picker.html" with id="range_disabled" label="Reporting period" disabled=True presets=True only %}
</div>Error
Choose a valid date range.
Show template
{% load wdj %}
<div class="grid w-full max-w-lg gap-4">
{% include "wdj/components/date_range_picker.html" with id="range_error" label="Reporting period" error="Choose a valid date range." only %}
</div>Range calendar and presets
Show template
{% load wdj %}
{% include "wdj/components/calendar.html" with id="audit-calendar-range" label="Date range" month="2026-10" mode="range" presets=audit_presets only %}Popup with native range names
Show template
{% load wdj %}
<form class='flex flex-col gap-3' action='#' data-demo-form>
{% include 'wdj/components/date_range_picker.html' with id='popup-period' display='popover' label='Reporting period' start_name='period_start' end_name='period_end' month='2026-10' number_of_months=2 min_days=3 max_days=14 required=True disabled_dates=audit_disabled_dates presets=audit_presets only %}
<div class='flex flex-wrap gap-2'>{% include 'wdj/components/button.html' with label='Apply period' type='submit' only %}{% include 'wdj/components/button.html' with label='Reset period' type='reset' only %}</div>
</form>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| start_name | string | unset | Start name; pass the documented value shown in the examples. |
| end_name | string | unset | End name; pass the documented value shown in the examples. |
| start_value | number | unset | Start value; pass the documented value shown in the examples. |
| end_value | number | unset | End value; pass the documented value shown in the examples. |
| label | string | unset | Visible accessible label. Supply an explicit aria-label via attrs when the control is bare. |
| description | string | unset | Description; pass the documented value shown in the examples. |
| error | string | unset | Validation message; implies error styling and accessible error association. |
| required | bool | False | Required; pass the documented value shown in the examples. |
| disabled | bool | False | Disabled; pass the documented value shown in the examples. |
| min | ISO date / datetime string | unset | Inclusive date or datetime bound, using the same ISO format as value. Unavailable calendar days are disabled. |
| max | ISO date / datetime string | unset | Inclusive date or datetime bound, using the same ISO format as value. Unavailable calendar days are disabled. |
| presets | bool / list[dict] | unset | Presets; pass the documented value shown in the examples. |
| size | string | base | Size; pass the documented value shown in the examples. |
| id | string | unset | Stable unique DOM ID; important for HTMX targets and focus restoration. |
| attrs | dict | {} | Dictionary of escaped native, HTMX or Alpine attributes. Literal Tailwind classes only. |
| class | string | "" | Class; pass the documented value shown in the examples. |
| display | string | popover | popover (default for dates, datetimes and ranges), calendar (inline), or explicit native. Time/month use native controls. Custom calendars never invoke the browser date popup. |
| locale | string | en | Intl locale for month headings, full date labels and weekdays; default en. Action labels are supplied separately. |
| week_starts_on | number | 0 | 0=Sunday (default, matching Kumo) through 6=Saturday. Keyboard Home/End follow this setting. |
| number_of_months | number | 1 | Calendar month panels, bounded to 1-12; default 1. Panels wrap on small screens. |
| fixed_weeks | bool | False | Render six calendar rows. Default False renders only the weeks in the month, matching Kumo. |
| month | string | unset | Month; pass the documented value shown in the examples. |
| min_days | number | unset | Min days; pass the documented value shown in the examples. |
| max_days | number | unset | Max days; pass the documented value shown in the examples. |
| disabled_dates | string | unset | Disabled dates; pass the documented value shown in the examples. |
| trigger_label | string | unset | Combobox without endpoint: enable the button trigger and search inside its popup. Calendar: calendar trigger text. |
| labels | dict | {} | Escaped text overrides: previous_month, next_month, open_calendar, calendar_label, navigation, selected_dates, time, invalid_date, unavailable, incomplete_range, single_date, range_length and blocked_range. trigger_label takes precedence over open_calendar. |
| calendar.mode | string / list | unset | Use mode with wdj/components/calendar.html. Date fields forward calendar parameters; use calendar_mode for DatePicker mode. |
| calendar.month | string / list | unset | Use month with wdj/components/calendar.html. Date fields forward calendar parameters; use calendar_mode for DatePicker mode. |
| calendar.min_days | number | unset | Use min_days with wdj/components/calendar.html. Date fields forward calendar parameters; use calendar_mode for DatePicker mode. |
| calendar.max_days | number | unset | Use max_days with wdj/components/calendar.html. Date fields forward calendar parameters; use calendar_mode for DatePicker mode. |
| calendar.disabled_dates | string / list | unset | Use disabled_dates with wdj/components/calendar.html. Date fields forward calendar parameters; use calendar_mode for DatePicker mode. |
| calendar.presets | bool / list[dict] | unset | Use presets with wdj/components/calendar.html. Date fields forward calendar parameters; use calendar_mode for DatePicker mode. |
| calendar.display | string / list | unset | Use display with wdj/components/calendar.html. Date fields forward calendar parameters; use calendar_mode for DatePicker mode. |
| calendar.locale | string / list | unset | Use locale with wdj/components/calendar.html. Date fields forward calendar parameters; use calendar_mode for DatePicker mode. |
| calendar.week_starts_on | number | unset | Use week_starts_on with wdj/components/calendar.html. Date fields forward calendar parameters; use calendar_mode for DatePicker mode. |
| calendar.number_of_months | number | unset | Use number_of_months with wdj/components/calendar.html. Date fields forward calendar parameters; use calendar_mode for DatePicker mode. |
| calendar.fixed_weeks | bool | unset | Use fixed_weeks with wdj/components/calendar.html. Date fields forward calendar parameters; use calendar_mode for DatePicker mode. |
| calendar.labels | dict | unset | Escaped text overrides: previous_month, next_month, open_calendar, calendar_label, navigation, selected_dates, time, invalid_date, unavailable, incomplete_range, single_date, range_length and blocked_range. trigger_label takes precedence over open_calendar. |