Date picker chrome

All components Component Brickwork 4.3.1

Try it

Native date floor

Open full-page preview

A consumer-owned native input in the fields slot.

Start date

Use when a date field needs calendar controls or a rich date-picker surface while retaining consumer ownership of date logic.

Use it

Working invocation

This code creates the configuration shown above. Copy the template and the required Python context together.

{% extends "brickwork/components/_date_picker_chrome.html" %}
{% block fields %}<div class="bw-date-picker-chrome__field"><input class="bw-input" type="date" name="starts_on" aria-label="Start date"></div>{% endblock %}

context = {'label': 'Start date', 'panel_open': False, 'range': False, 'panel_label': 'label'}

Guide

Add it to your project

Extend the partial for custom field and calendar markup.
Supply label and field identifiers.
Keep the native or consumer-owned input as the submitted value source.

View this component's source for the installed release

Options

Public API

Option	Type	Default	Required	Description
label	str	Not set	Yes	Accessible field-group name. Constraint: Use concise visible text that identifies the control or measurement.
range	bool	False	No	Uses wrapping start/end layout. Constraint: No additional package-level validation is documented beyond this option's stated type and its role in the component.
help_text	str	Not set	No	Supporting field text. Constraint: Keep it supplemental and do not repeat the label.
id	str	bw-date-picker-chrome	No	Root id and label-id seed. Constraint: Use a stable id-safe token of letters, digits, hyphens, or underscores; it must be unique on the page.
panel_label	str	label	No	Dialog name; defaults to label. Constraint: No additional package-level validation is documented beyond this option's stated type and its role in the component.
panel_open	bool	False	No	Removes hidden from dialog wrapper. Constraint: No additional package-level validation is documented beyond this option's stated type and its role in the component.
fields	SafeString\|template block	Not set	No	Native input and trigger controls. Constraint: Pass bound field or field-renderer values, not untrusted HTML strings.
panel	SafeString\|template block	Not set	No	Consumer-owned calendar/dialog content. Constraint: No additional package-level validation is documented beyond this option's stated type and its role in the component.

Behaviour

Accessibility and responsive behaviour

Accessibility: The group is named by its label and consumer-owned controls must retain their native labels and states.
Responsive: No documented breakpoint switch.
Without JavaScript: The native date input can provide the complete no-JS floor.

Need help?

Troubleshooting

Contract check: Required: label (accessible name for the field group; rendered as the

Supply the field-group `label`; it is rendered as the accessible name for the date controls.