DatePicker

Partial Input

Kumo-styled date and datetime popups; inline single, multiple and range calendars with bounds/presets.

Kumo reference: kumo-ui.com/components/date-picker/

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

Single date

Release date

Show template

{% load wdj %}
<div class="grid w-full max-w-lg gap-4">
{% include "wdj/components/date_picker.html" with name="date_single_date" label="Release date" value="2026-10-10" only %}
</div>

Date and time

Schedule

Show template

{% load wdj %}
<div class="grid w-full max-w-lg gap-4">
{% include "wdj/components/date_picker.html" with name="date_date_and_time" label="Schedule" type="datetime-local" value="2026-10-10T09:00" only %}
</div>

Boundaries

Allowed date

Show template

{% load wdj %}
<div class="grid w-full max-w-lg gap-4">
{% include "wdj/components/date_picker.html" with name="date_boundaries" label="Allowed date" min="2026-10-01" max="2026-10-31" only %}
</div>

Disabled

Managed date

Show template

{% load wdj %}
<div class="grid w-full max-w-lg gap-4">
{% include "wdj/components/date_picker.html" with name="date_disabled" label="Managed date" value="2026-10-10" disabled=True only %}
</div>

Error

Release date

Choose a date.

Show template

{% load wdj %}
<div class="grid w-full max-w-lg gap-4">
{% include "wdj/components/date_picker.html" with name="date_error" label="Release date" error="Choose a date." only %}
</div>

Time

Show template

{% load wdj %}
<div class="w-full max-w-sm">{% include "wdj/components/date_picker.html" with name="date_picker_time" label="Time" type="time" value="09:30" only %}</div>

Month

Show template

{% load wdj %}
<div class="w-full max-w-sm">{% include "wdj/components/date_picker.html" with name="date_picker_month" label="Month" type="month" value="2026-10" only %}</div>

Required

Show template

{% load wdj %}
<div class="w-full max-w-sm">{% include "wdj/components/date_picker.html" with name="date_picker_required" label="Required" required=True only %}</div>

Single calendar

Date selection

Show template

{% load wdj %}
{% include "wdj/components/calendar.html" with id="audit-calendar-single-calendar" name="date" label="Date selection" month="2026-10" min="2026-10-01" max="2026-12-31" only %}

Multiple date selection

Date selection

Show template

{% load wdj %}
{% include "wdj/components/calendar.html" with id="audit-calendar-multiple-date-selection" name="date" label="Date selection" month="2026-10" min="2026-10-01" max="2026-12-31" mode="multiple" only %}

Range calendar

Date selection

Show template

{% load wdj %}
{% include "wdj/components/calendar.html" with id="audit-calendar-range-calendar" name="date" label="Date selection" month="2026-10" min="2026-10-01" max="2026-12-31" mode="range" only %}

Range length bounds

Date selection

Show template

{% load wdj %}
{% include "wdj/components/calendar.html" with id="audit-calendar-range-length-bounds" name="date" label="Date selection" month="2026-10" min="2026-10-01" max="2026-12-31" mode="range" min_days=3 max_days=7 only %}

Unavailable dates

Date selection

Show template

{% load wdj %}
{% include "wdj/components/calendar.html" with id="audit-calendar-unavailable-dates" name="date" label="Date selection" month="2026-10" min="2026-10-01" max="2026-12-31" disabled_dates=audit_disabled_dates only %}

Calendar presets

Date selection

Show template

{% load wdj %}
{% include "wdj/components/calendar.html" with id="audit-calendar-calendar-presets" name="date" label="Date selection" month="2026-10" min="2026-10-01" max="2026-12-31" mode="range" presets=audit_presets only %}

Calendar in popover

Show template

{% load wdj %}
{% wdj_component "wdj/components/popover.html" id="audit-date-popover" trigger_label="Choose date" %}
{% include "wdj/components/calendar.html" with id="audit-calendar-popover" label="Choose date" month="2026-10" only %}
{% endwdj_component %}

Range in popover

Show template

{% load wdj %}
{% wdj_component "wdj/components/popover.html" id="audit-date-range-popup" trigger_label="Choose date range" %}
{% include "wdj/components/calendar.html" with id="audit-range-popover" label="Choose range" month="2026-10" mode="range" only %}
{% endwdj_component %}

Localized popup calendar

Data raportului

Show template

{% load wdj %}
{% include 'wdj/components/date_picker.html' with id='example-localized-date' name='date' label='Data raportului' display='popover' locale='ro' week_starts_on=1 month='2026-10' labels=audit_calendar_labels only %}

Two month calendar

Multiple dates

Show template

{% load wdj %}
{% include 'wdj/components/date_picker.html' with id='example-multi-month-date' name='dates' label='Multiple dates' display='calendar' calendar_mode='multiple' month='2026-10' number_of_months=2 locale='en' week_starts_on=0 only %}

API Reference

Prop	Type	Default	Description
name	string	unset	Name; pass the documented value shown in the examples.
value	string	unset	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.
type	string	date	Type; 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.
size	string	base	Size; pass the documented value shown in the examples.
variant	string	component-specific	Variant; 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.
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.
calendar_mode	string	single	DatePicker calendar rendering: single (default), multiple, or range. DateRangePicker always selects a range.
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.
presets	bool / list[dict]	unset	Presets; 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.
class	string	""	Class; pass the documented value shown in the examples.
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.

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